Question

我有一个下拉菜单的代码：

<header>
        <nav class="navbar"> 
            <div class="inner-wrapper">
              <a class="button" id="menu-button">Menu</a>
              <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#classes">Classes</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div>
        </nav>
</header>

header nav div ul {
    list-style: none;
    padding: 0;
    line-height: 1.75;
    background-color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
    overflow: hidden;
    height: auto;
    display: none;
}

header nav div ul.menu-open {
    display: block;
}

$(".button").click(function() {
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300, function() {
     $("header nav div ul").toggleClass("menu-open");
  });
});

因此，当用户点击按钮时，它会切换打开菜单的类。该菜单目前是一个单页网站，所以我也有一个流畅的滚动脚本工作。如何在用户进行选择后让菜单消失，例如菜单在选择了之后消失，并将其带到正确的部分。

谢谢！

Answer 1

试试：a fiddle

$(".button").click(function() {
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300 );
});
$('.navbar li a').click(function(){
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300 );
});

Answer 2

此方法的一个问题是，如果您选择了错误的选项，则用户需要重新加载整个页面才能重新选择是否要完全隐藏下拉列表。但是，如果这是您希望采用的方法，只需在下拉列表中添加onchange处理程序，并在脚本中选择id下拉列表，在JS document.getElementById（id）.style.display = none; 如果这不是你的意思澄清你想做什么，我们会再试一次。

Answer 3

您可以尝试这样做：

我将类li-option添加到'lis a'标签中，然后为此类创建了一个onclick函数。

SetToSeen

Answer 4

$(".button").click(function() {
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300, function() {
     $("header nav div ul").toggleClass("menu-open");
    $('.navbar li a').click(function(){
      $("header nav div ul").toggleClass("menu-open");
      $("header nav div ul" ).animate({
    opacity: 1,
    height: "hide"
  }, 300);
    });
  });
});

我在js bin中尝试了类似的东西并且它有效。这是你在找什么？

jsbin

Answer 5

我为<li>添加了点击事件，然后模拟点击.button

＆＃13;

$(".button").click(function() {
  $("header nav div ul").animate({
    opacity: 1,
    height: "toggle"
  }, 300, function() {
    $("header nav div ul").toggleClass("menu-open");
  });
});

$("li").click(function() {
  $(".button").trigger("click"); // Simulate the button click
});

＆＃13;

header nav div ul {
  list-style: none;
  padding: 0;
  line-height: 1.75;
  background-color: rgba(255, 255, 255, 0.6);
  margin-top: 5px;
  overflow: hidden;
  height: auto;
  display: none;
}

header nav div ul.menu-open {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav class="navbar">
    <div class="inner-wrapper">
      <a class="button" id="menu-button">Menu</a>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#classes">Classes</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

＆＃13;

选择链接后，下拉菜单会消失

5 个答案: