如何劫持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受到影響？

來源

2014-10-09 marcamillion

你需要停止事件傳播和目標只有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>

來源

2014-10-09 00:46:20

很好回答，阿倫。我想知道如何做到這一點，我選擇了一個更簡單的解決方案。看到你工作你的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; 
});

來源

2014-10-09 00:47:01 gibberish

-1

那是因爲你正在使用（這一點）這需要你點擊，但隨後選擇整個無序列表的鏈接的照顧。您需要將網址放在單獨的列表項上，以便按照您擁有的方式工作。

來源

2014-10-09 00:48:52 l3ny

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

回答

相關問題