javascript - 我如何只劫持 LI 中的一个特定链接而不是所有链接？

Question

我有一个菜单，在每个 li 中, 它将有多个 <a>标签。主要的是元素的名称。单击该按钮时，我希望发生 Dropdown 事件。但在 <li> 内的元素上我希望这些点击功能正常运行。

我的 HTML 看起来像这样:

<li class="tree-item-name"><a href="#">Aunts &amp; Uncles</a>
    <span class = "bootstrap-styles">
       <ul>
           <li>
               <a href="/family_trees/3"><img alt="Default" class="img-circle" height="48" src="/assets/default.jpg" width="48" /></a>
                <a href="/family_trees/3">Jackie Lynn</a> <a data-confirm="Are you sure?" data-method="delete" href="/family_trees/3" rel="nofollow"><i class="fa fa-thumbs-o-down"></i></a>
            </li>
        </ul>
     </span>
 </li>

JS 看起来像这样:

jQuery(document).ready(function(){
    jQuery('LI.tree-item-name').click(function(){
        if (jQuery(this).hasClass('opened')) {
            jQuery(this).find('UL').slideUp();
            jQuery(this).removeClass('opened');
        } else {
            jQuery(this).find('UL').slideDown();
            jQuery(this).addClass('opened');
        }
        return false;
    });
});

但是现在，当您点击 img标签或 Jackie Lynn ....都不起作用 - 因为两者都被 JS 劫持了。

我该如何设置，所以只有 li.tree-item-name有影响吗？

Answer 1

您需要停止事件传播并仅针对其中包含 ul 的 li

jQuery(function($) {
  $('LI.tree-item-name').has('ul').click(function() {
    if ($(this).hasClass('opened')) {
      $(this).find('UL').slideUp();
      $(this).removeClass('opened');
    } else {
      $(this).find('UL').slideDown();
      $(this).addClass('opened');
    }
    return false;
  });

  $('LI.tree-item-name li').click(function(e) {
    e.stopPropagation();
  })
});

.tree-item-name ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li class="tree-item-name">
    <a href="#">Aunts &amp; Uncles</a>
    <span class="bootstrap-styles">
      <ul>
        <li>
          <a href="/family_trees/3"><img alt="Default" class="img-circle" height="48" src="/assets/default.jpg" width="48" /></a>
          <a href="/family_trees/3">Jackie Lynn</a> <a data-confirm="Are you sure?" data-method="delete" href="/family_trees/3" rel="nofollow"><i class="fa fa-thumbs-o-down"></i></a>
        </li>
      </ul>
    </span>
  </li>
</ul>