打開下拉導航，但無法關閉它（jQuery）

我做了一個下拉導航使用JQuery和CSS。當你點擊一個特定的按鈕時，它會打開，但是當再次點擊該按鈕時我無法關閉它。下面是我使用的（我已經創建了一個「關閉」按鈕關閉它，但要當你點擊你沒有開相同的按鈕它得到閉合）打開下拉導航，但無法關閉它（jQuery）

Jquery的代碼：

 $("#shadow").css("height", $(document).height()).hide(); 

    $(".menubutton").click(function() { 
    $(".thetopmenu").css("padding","0px"); 
    $(".thetopmenu").css("display","block"); // Displayes the menu 
    $(this).addClass("active"); // Add "active" class to selected tab 
    $("#shadow").toggle(); 
    }); 

    $(".close").click(function() { 
    $(".thetopmenu").css("display","none"); 
    $(".menubutton").removeClass("active"); 
    $("#overlay").css("display","none"); // Removes "active" class to selected tab 
    $("#shadow").toggle(); 
    });

CSS：

 .menubutton { 
     margin: 0; padding: 6px 0 0 0; 
     background: url(images/menu.png) no-repeat left top; 
     width: 44px; height: 16px; 
     position: absolute; 
     right: 10px; 
     top: 20px; 
     text-align: center; 
     display: block; 
     text-transform: uppercase; 
     color: #c3c3c3; 
     text-shadow: 0px -1px 0px #4f4f4f; 
     font-family: MPSemibold, Arial; 
     font-size: 10px; 
     text-decoration: none; 
    } 

    .menubutton:link { 
     text-transform: uppercase; 
     color: #c3c3c3; 
     text-shadow: 0px -1px 0px #4f4f4f; 
     font-family: MPSemibold, Arial; 
     font-size: 10px; 
     text-decoration: none; 
    } 


    .menubutton:active, .menubutton.active, menubutton:hover { 
     background: url(images/menuh.png) no-repeat left top; 
     color: #fff; 
    }  

    .thetopmenu { 
     display: none; 
     position: absolute; 
     left: 0; 
     z-index: 999; 
     top: 61px; 
     width: 100%; 
    }

HTML：

<a href="#" class="menubutton"><span>Menu</span></a> 
      <div class="thetopmenu"> 
       <ul id="content"> 
       <li><a href="ladies.php">Ladies' Collection</a></li> 
       <li><a href="gents.php">Gents' Collection</a></li> 
       <li><a href="store.php">Store Locator</a></li> 
       <li><a href="#" class="close">Close</a></li> 
       </ul> 
      </div>

的#shadow剛剛淡出屏幕的休息和葉菜單正常。我認爲這很簡單，但我在jQuery中並不擅長。

謝謝

來源

2011-02-16 pomaaa

你不應該這樣做：

$(".menubutton").click(function() { 
    if($(this).css("display") == 'none') 
    { 
    $(".thetopmenu").css("padding","0px"); 
    $(".thetopmenu").css("display","block"); // Displayes the menu 
    $(this).addClass("active"); // Add "active" class to selected tab 
    $("#shadow").toggle(); 
    } 
    else 
    { 
    $(".thetopmenu").css("display","none"); 
    $(".menubutton").removeClass("active"); 
    $("#overlay").css("display","none"); // Removes "active" class to selected tab 
    $("#shadow").toggle(); 
    } 
    });

也許我誤解，但有沒有辦法似乎該按鈕會知道你在第二次點擊的意圖。

來源

2011-02-16 20:35:34 clifgriffin

謝謝，那正是我正在尋找的。我嘗試了 - 如果 - 但沒有設法讓它工作。你的作品就像一個魅力。再次感謝;） – pomaaa 2011-02-16 20:56:17

不客氣。不要忘記標記答案是正確的。 :)另外，我會建議修改你的代碼，以便你可以使用更通用的函數。就像我在我的mod中使用$（this）一樣，如果多個菜單在等式中，您應該能夠使代碼具有通用性並且可重用。讓我知道你是否需要這方面的幫助。 – clifgriffin 2011-02-16 21:01:25

一招是在打開時添加一個類，然後再次檢查該類以瞭解是否要關閉它，並刪除該類。

由於您已經因其他原因添加和刪除類，因此這可能是您獲得所需內容的最佳方式。

我要再你的代碼了一下，在這裏可以直接在編輯器中，它應該工作（或多或少），反正給你的想法：

$(".menubutton").click(function() { 
    if ($(this).is('.active')) { 
     $(".thetopmenu").css("display","none"); 
     $(this).removeClass("active"); 
    } else { 
     // Displayes the menu 
     $(".thetopmenu").css({ 
     padding : "0px", 
     display: "block" 
     }); 
     $(this).addClass("active"); // Add "active" class to selected tab 
    } 
    $("#shadow").toggle(); 
    });

希望它能幫助，西蒙娜

來源

2011-02-16 20:40:50

打開下拉導航，但無法關閉它（jQuery）

回答

相關問題