Question

我仍在学习javascript，所以请多多包涵！

我正在尝试使用Jquery创建菜单，到目前为止，我已经设法使任何给定的li的子ul都显示出来，但是我不确定如何一次只显示一个菜单。

我还想在每个子ul中添加一个关闭按钮，以将其隐藏在其中。我已经以某种方式在不知不觉中实现了这一目标，但是我不确定如何进行任何解释都是很好的。或者，如果有适当的方法来做，也将不胜感激。

$("ul ul").hide();
     $("li").click(function (event) {
         event.stopPropagation();
         $(this).children('ul').toggle();
     });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
      <li>Item 1
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
            <div class="close">
            close
            </div>
        </ul>
      </li>
      <li>Item 2
        <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        </ul> 
      </li>
      <li>Item 3</li>
    </ul>

Answer 1

您的关闭项目之所以有效，是因为您的$(this).children('ul').toggle()以及您正在使用<div>元素进行关闭的事实。当您单击内部的<li>元素时，$(this)指的是没有子元素的那个 <li>元素。当您点击<div>时，您还成功点击了Item 1（触发父级 $("li").click），这又触发了{{1} }成功地对待孩子。不幸的是，这里的$(this).children('ul').toggle()将是无效的标记，最好不要使用<div>元素并为<li>设置自定义点击柄。

如上所述，您正在触发“双击”。为了解决这个问题，最好的方法是仅为父级$('.close')设置一个单独的单击手柄，以切换子级。然后，您可以在<li>上使用处理程序来切换其他元素的显示，该处理程序将隐藏li li（两个父图层也覆盖$(this).parent().parent().siblings().children()）。

这可以在下面看到：

<ul>

$("li").click(function(event) {
  $(this).children('ul').show();
  event.stopPropagation();
});

$("li li").click(function() {
  $(this).parent().parent().siblings().children().hide();
});

$('.close').click(function() {
  $(this).parent().hide();
  $(this).parent().parent().siblings().children().toggle();
});

隐藏所有其他子元素并添加关闭按钮

1 个答案: