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

问题描述：

我有一个菜单，在每个li，它将有多个<a>标签。主要的是该项目的名称。点击时，我想要发生下拉事件。但是对于<li>内的项目，我希望这些点击正常运行。如何劫持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受到影响？

答

你需要停止事件传播和目标只有li S的有ul里面

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>

很好回答，阿伦。我想知道如何做到这一点，我选择了一个更简单的解决方案。看到你工作你的jQuery-Fu总是很高兴。 +1 – gibberish 2014-10-09 01:01:15

太棒了...这是完美的。正是我需要的！谢谢。 – marcamillion 2014-10-09 01:05:29

答

给你a标签（姑嫂&叔叔）一类，并使用该类作为jQuery点击事件触发器。

jsFiddle Demo

<li class="tree-item-name"><a class="rels" 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="http://placekitten.com/g/48/48" 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> 

jQuery('.rels').click(function(){ 
    if (jQuery(this).parent().hasClass('opened')) { 
     jQuery(this).parent().find('UL').slideUp(); 
     jQuery(this).parent().removeClass('opened'); 
    } else { 
     jQuery(this).parent().find('UL').slideDown(); 
     jQuery(this).parent().addClass('opened'); 
    } 
    return false; 
});

答

那是因为你正在使用（这一点）这需要你点击，但随后选择整个无序列表的链接的照顾。您需要将网址放在单独的列表项上，以便按照您拥有的方式工作。

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

相关推荐