jquery - 打开了下拉导航，但无法关闭它(jQuery)

Question

我使用 Jquery 和 css 制作了下拉导航。当您单击特定按钮时，它会打开，但是当再次单击该按钮时，我无法将其关闭。这是我正在使用的代码(我创建了一个“关闭”按钮来关闭它，但希望当您单击与打开时相同的按钮时将其关闭)

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。

谢谢

Answer 1

你不应该这样做:

 $(".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();
   }
  });

也许我误解了，但按钮似乎无法知道您第二次单击的意图。