Question

目前，切换功能正确打开并应用“打开”功能。单击时导航到css。但是，当您单击菜单项时，我无法让脚本删除该类。

通常这不是问题，但此菜单用于在一个页面内滚动到锚标签，因此需要在点击后关闭。

这是我的基本标记：

$(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

你必须看看你是否有最新版本的jquery，如果它不使用addclass和remoeclass而不是toggleclass

Answer 2

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

$("#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>

单击导航链接时关闭切换

2 个答案: