Question

我有一个简单的垂直下拉菜单，如下所示：

<nav>
<ul>
    <li><a href="#">Parent</a>
        <ul class="sub-menu">
            <li><a href="">Lorem </a></li>
            <li><a href="">Lorem</a></li>
        </ul>
    </li>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Parent</a>
        <ul class="sub-menu">
            <li><a href="">Lorem </a></li>
            <li><a href="">Lorem</a></li>
        </ul>
    </li>
</ul>  
</nav>

我使用简单的jquery打开/关闭子li工作正常，但是一旦子菜单打开，我就不能通过单击父元素来关闭它，而是我需要打开其他下拉菜单来关闭它。

你可以在这里看到我的意思：https://jsfiddle.net/1hqkgocr/ 我是jquery新手，所以我真的不知道如何做到让它接近......

感谢您的帮助！

更新：我知道我可以使用切换，但我在侧边栏（wordpress）中有多个菜单，我还需要添加＆＃34;选择＆＃34; class到当前菜单项，所以这段代码到目前为止效果最好。唯一的问题，无法关闭它：D

Answer 1

Juste使用.slideToggle() JQuery函数：

$('nav>ul>li').click(function(){
  $('ul',this).slideToggle();
});

Answer 2

通过添加checkElement.slideUp('normal');修改您的代码，如下所示：

if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    checkElement.slideUp('normal');
    checkElement.closest('li').removeClass('selected');
    return false;
}

更新的代码位于https://jsfiddle.net/to27n8dy/1/

          $('nav ul.sub-menu').hide();
          $('nav li.current-menu-item').children().show();
          $('nav li.current-menu-item').parents().show();

          $('nav ul li a').click(
            function() {
              var checkElement = $(this).next();
              if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                checkElement.slideUp('normal');
                checkElement.closest('li').removeClass('selected');
                return false;
              }
              if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $(this).parent().siblings("li:has(ul)").find("ul").slideUp('normal');
                $('nav ul ul li ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
                $(this).closest('li').addClass('selected'); // I also tried .parent().addClass
                return false;
              }
            }
          );
          $('nav ul ul li a').click(
            function() {
              var checkElement = $(this).next();
              if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                return false;
              }
              if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('nav ul ul').slideUp('normal');
                $('nav ul ul li ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
                return false;
              }
            }
          );

ul.sub-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#">Parent</a>
      <ul class="sub-menu">
        <li><a href="">Lorem </a></li>
        <li><a href="">Lorem</a></li>
      </ul>
    </li>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Lorem</a></li>
    <li><a href="#">Parent</a>
      <ul class="sub-menu">
        <li><a href="">Lorem </a></li>
        <li><a href="">Lorem</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 3

您正在使用如此多的代码来完成一项简单的任务

你只需要这个：

$('nav ul.sub-menu').hide();
$('nav li.current-menu-item').children().show();
$('nav li.current-menu-item').parents().show(); 

$('nav ul li').click(function() {
  $('.sub-menu',this).slideToggle();
});

ul.sub-menu {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
	<li><a href="#">Parent</a>
		<ul class="sub-menu">
			<li><a href="">Lorem </a></li>
			<li><a href="">Lorem</a></li>
		</ul>
	</li>
	<li><a href="#">Lorem</a></li>
	<li><a href="#">Lorem</a></li>
	<li><a href="#">Parent</a>
		<ul class="sub-menu">
			<li><a href="">Lorem </a></li>
			<li><a href="">Lorem</a></li>
		</ul>
	</li>
</ul>  
</nav>

这是更新的小提琴：https://jsfiddle.net/vchmqyg0/

Answer 4

简单修复，首先给你的父类一个属性。

.menu {
    position: relative;
    display: inline-block;
}

接下来，将此CSS添加到子菜单类中，因此默认情况下，子菜单不会显示并为其提供ID。

.sub-menu {
    display: none;
    position: absolute;
 }

 <ul class="sub-menu" ID="sub-menu">

然后添加一个show类，它将内容的显示更改为阻止

.show {display:block;}

接下来添加jQuery，切换show class

function myFunction() {
document.getElementById("sub-menu").classList.toggle("show");
}

如果您需要更多帮助，请查看：https://www.w3schools.com/howto/howto_js_dropdown.asp

在父单击时关闭ul

4 个答案: