Question

我想创建一个打开的菜单，当我点击它打开它并向我显示其他li的时候，但是我不希望点击打开的li（孩子们的li）它会关闭。我希望它什么都不做。所以我想选择李父母，但不是它的孩子也是李。这是我尝试但不起作用的代码和解决方案。

        <ul>
            <li class="only">1dkhg
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSrRT0M-NSrnnPJrKSF3YtyJGtSXjcBQHuuql5vp-cUYEx-j-F8">
                <ul>
                    <li class="no">1kldg</li>
                    <li class="no">2kldg</li>
                    <li class="no">3kldg</li>
                </ul>
            </li>

和jquery：

$(document).ready(function() {

    $(".only:not('.no')").click(function() {
        $( this ).find('ul').animate({
            height: "toggle"
         });
        $(this).find('img').toggleClass('click');
    });

});

Answer 1

您可以使用：

$(".only").click(function (e) {
        if(e.target !== this) return;
        $(this).find('ul').animate({
            height: "toggle"
        });
        $(this).find('img').toggleClass('click');
    });

Answer 2

更好的结构是在根anchor中使用li，这样当您点击锚点时，子ul就会打开。通过这种方式，您可以避免担心事件冒泡，并且描述点击目标在语义上更准确：

<ul id="nav">
  <li>
    <a href="#">Anchor</a>
    <ul>
      <li>sub anchors</li>
    </ul>
  </li>
</ul>

使用Javascript：

$('#nav>li>a').click(function(e){
  $(this).next().slideToggle();
});

jQuery更改元素而不更改其子项

2 个答案: