打开下拉导航，但无法关闭它（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）

回答

相关问题