javascript - 单击导航链接时关闭切换

Question

目前，切换开关可以正确打开，并在单击时将“打开”CSS 应用于导航。但是，当您单击菜单项时，我无法获取用于删除该类的脚本。

通常这不会成为问题，但此菜单用于滚动到一页内的 anchor 标记，因此单击后需要关闭。

这是我的基本标记:

$(document).ready(function(){
    $("a.toggle").click(function(){
        $("nav > ul").slideToggle(500);
        $(this).toggleClass("open");
    });
});

HTML

<nav id="main">
    <a href="#" class="toggle"></a>
    <ul>
        <li><a href="#">Example Link 1</a></li>
        <li><a href="#">Example Link 1</a></li>
        <li><a href="#">Example Link 1</a></li>
        <li><a href="#">Example Link 1</a></li>
    </ul>
</nav>

Answer 1

您可以将单击事件附加到菜单项来切换主菜单的显示。希望这就是您正在寻找的。

$("#main ul li a").click(function () {
    $("nav > ul").slideToggle(500);
    $("a.toggle").toggleClass("open");
});

$(function () {
  $("a.toggle").click(function () {
	$("nav > ul").slideToggle(500);
	$(this).toggleClass("open");
  });

  $("#main ul li a").click(function () {
	$("nav > ul").slideToggle(500);
	$("a.toggle").toggleClass("open");
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav id="main">
<a href="#" class="toggle">Home</a>
<ul>
  <li><a href="#">Example Link 1</a></li>
  <li><a href="#">Example Link 1</a></li>
  <li><a href="#">Example Link 1</a></li>
  <li><a href="#">Example Link 1</a></li>
</ul>
</nav>