可點擊的li，但另一個不可點擊的li

Question

我試圖弄清楚這一點，但是對於我的一生，我感到困惑。 我有這個：

<!-- Sidebar Menu -->
<ul class="sidebar-menu">
  <li class="header">HEADER</li>
  <!-- Optionally, you can add icons to the links -->
  <li class="active"><a href="res/link.php"><i class='fa fa-link'></i> 
    <span>Links</span></a></li>
  <li><a href="#"><i class='fa fa-link'></i> <span>Another Link</span></a></li>
  <li class="treeview">
    <a href="#"><i class='fa fa-link'></i>
   <span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a>
    <ul class="treeview-menu">
      <li><a href="#">Link in level 2</a></li>
      <li><a href="#">Link in level 2</a></li>
    </ul>
  </li>
</ul><!-- /.sidebar-menu -->

和我的javascript：

var hash = window.location.hash.substr(1);
var href = $('.sidebar-menu li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-10)){
        var toLoad = hash+'.php #content';
        $('#content').load(toLoad)
    }                                           
});

$('.sidebar-menu li a > .treeview li a').click(function(){

我在這條線上遇到了麻煩：

$('.sidebar-menu li a > .treeview li a').click(function(){

我想要的sidebar-menu的所有菜單點擊li同的a標簽但是當我點擊的treeview菜單，它激發了作為一個href鏈接。 我不希望該點擊。

我是否在JavaScript中正確使用了大於或小於符號？

Answer 1

用它來防止默認的href操作

$(your selector).click(function(e) {
  e.preventDefault();
  // e for event
  // preventDefault will stop default href action
});

編輯：或者您可以使用此選擇器處理所有＃個鏈接，並阻止Default

$('.sidebar-menu a[href="#"]').click(function(e){
  e.preventDefault();
});

選擇器a[href="#"]將僅選擇具有param href ==“＃”的A標簽，然后在其上使用preventDefault（）即可停止默認href操作

Answer 2

如果只需要選擇器正下方的元素，請使用> 。 這只會在sidebar-menu中的li標簽中直接選擇a標簽：

$('.sidebar-menu > li > a')

您的第一次onclick可能如下所示：

var href = $('.sidebar-menu > li > a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-10)){
        var toLoad = hash+'.php #content';
        $('#content').load(toLoad)
    }                                           
});

您的第二個可以看起來像這樣：

$('.treeview li a').click(function(){
    // do stuff.
});

這取決於你有多少嵌套做，但是這將適用於所有a標簽在你的TreeView，無論嵌套層。

編輯 ：我看到您根本不希望樹可單擊。 在這種情況下，您根本不應使用a標簽。 使用具有span的樣式，使其看起來像一個鏈接。 鏈接（ a ）到某處。 如果您不去某個地方，請不要使用a 。

小提琴： https : //jsfiddle.net/6njj7L9g/2/

片段：

 $(document).ready(function() { var hash = window.location.hash.substr(1); var href = $('.sidebar-menu li a').each(function(){ var href = $(this).attr('href'); if(hash==href.substr(0,href.length-10)){ var toLoad = hash+'.php #content'; $('#content').load(toLoad) } }); $('.sidebar-menu > li > a').click(function(){ var toLoad = $(this).attr('href')+' #content'; $('#content').hide('fast',loadContent); $('#load').remove(); $('#wrapper').append('<span id="load">LOADING...</span>'); $('#load').fadeIn('normal'); window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); function loadContent() { $('#content').load(toLoad,'',showNewContent()) } function showNewContent() { $('#content').show('normal',hideLoader()); } function hideLoader() { $('#load').fadeOut('normal'); } return false; }); }); 

 .treeLink{ text-decoration: underline; color: blue; cursor: pointer; } 

 <!-- Sidebar Menu --> <section> <ul class="sidebar-menu"> <li class="header">HEADER</li> <!-- Optionally, you can add icons to the links --> <li class="active"><a href="res/link.php"><i class='fa fa-link'></i> <span>Links</span></a></li> <li><a href="#"><i class='fa fa-link'></i> <span>Another Link</span></a></li> <li class="treeview"> <a href="#"><i class='fa fa-link'></i> <span>Multilevel</span> <i class="fa fa-angle-left pull-right"></i></a> <ul class="treeview-menu"> <li><span class="treeLink">Link in level 2</span></li> <li><span class="treeLink">Link in level 2</span></li> </ul> </li> </ul><!-- /.sidebar-menu --> 

Answer 3

如果您不希望它可點擊，請設置href=""而不是href="#" 。