Question

如果单击的元素是带有slidetoggle的子元素，我想停止执行slidetoggle。

<ul>
  <li class="parentToggle">
    I am the parent

    <ul class="hiddenClass">
      <li class="childToggle">
        I am child. I will be shown when parent is clicked.

        <ul class="hiddenClass2">
          <li>
            I am grandchild. I will be shown when child is clicked.
          </li>
        </ul>

      </li>

      <li class="childToggle">
        I am 2nd child. I will be shown when parent is clicked.

        <ul class="hiddenClass2">
          <li>
            I am grandchild. I will be shown when child is clicked.
          </li>
        </ul>

      </li>
    </ul>

  </li>
</ul>

我有以下脚本。

$('.parentToggle').click(function() {
  $(this).find('hiddenClass').slideToggle();
});

$('.childToggle').click(function() {
  $(this).find('.hiddenClass2').slideToggle();
});

根据行为，当点击childToggle时，parentToggle会执行，因为子节点也是父节点的一部分。

编辑：更新了代码，添加了另一个孩子。

Answer 1

尝试以下方法：

$('.parentToggle').click(function(e) {
if ($(e.target).is('.childToggle')) {//test if the clicked element is the child ,if it is toggle its child ,if it's not toggle the parent slide
   $(e.target).find('.hiddenClass2').slideToggle();
  } else {
  $(this).find('.hiddenClass').slideToggle();
  }
});

https://jsfiddle.net/zeasts/tk3d3yen/

元素与幻灯片切换内部元素与幻灯片切换

1 个答案: