點擊錨點，如何瞄準沒有任何UL的LI

我有一個簡單的菜單，在錨點內有一個箭頭。我有jQuery，添加一個類來顯示點擊箭頭。但是，如果單擊的li沒有子菜單，我需要它不要點擊「顯示箭頭」。這裏是我的菜單的粗略例子：在這個例子中，我不想箭頭以顯示，如果「TopLevel_LinkOne」或「TopLevel_LinkTwo」點擊點擊錨點，如何瞄準沒有任何UL的LI

<ul id="menu"> 
    <li><a href="#">TopLevel_LinkOne <img src="img/down-carat.png" class="down-carat"></a></li> 
    <li><a href="#">TopLevel_LinkTwo <img src="img/down-carat.png" class="down-carat"></a></li> 
    <li><a href="#">TopLevel_LinkThree <img src="img/down-carat.png" class="down-carat"></a> 
     <ul class="sub-menu"> 
      <li><a href="#">Submenu Link One <img src="img/down-carat.png" class="down-carat"></a></li> 
      <li><a href="#">Submenu Link Two <img src="img/down-carat.png" class="down-carat"></a></li> 
      <li><a href="#">Submenu Link Three <img src="img/down-carat.png" class="down-carat"></a></li>   
     </ul> 
    </li>   
</ul>

。我無法刪除箭頭圖片，因爲它是由Wordpress中的導航漫步者自動添加的。

這裏是我的jQuery：

$('#menu li a').click( 
function() { 
    $('ul li a').removeClass('show-arrow'); // Remove any previous arrows 
     if('some jquery here that checks if THIS has submenu') { 
      $(this).addClass('show-arrow'); // Show the arrow image 
     } 
});

來源

2014-05-07 TripsLeft

試試這個：

if($(this).parent().find('ul').length) { 
     $(this).addClass('show-arrow'); // Show the arrow image 
}

來源

2014-05-07 13:00:38

工作就像一個魅力。謝謝！我會盡快讓我接受 – TripsLeft

@TripsLeft：很高興它有幫助.... –

嘗試，

if($(this).closest('li').find('.sub-menu').length > 0)

全碼：

$('#menu li a').click(function() { 
    $('ul li a').removeClass('show-arrow'); // Remove any previous arrows 
    if($(this).closest('li').find('ul.sub-menu').length) { 
     $(this).addClass('show-arrow'); // Show the arrow image 
    } 
});

來源

2014-05-07 13:00:30

如果你的HTML允許你做出某些假設，你可以很容易地做到這一點。

例如，如果它是一個安全的假設，你的列表中的項目將只包含要麼「只是一個單一的<a>元素」，或「一單<a>元素後跟一個子菜單」，那麼你可以這樣做：

if(this.parentNode.children.length > 1)

但是如果你想要的魯棒性，你可以這樣做：

if($("ul",this.parentNode).length)

來源

2014-05-07 13:00:48

嘗試這種方式

jQuery代碼：

$('#menu li a').click(function() { 
    $('ul li a').removeClass('show-arrow'); // Remove any previous arrows 
     if($(this).siblings('ul').length) { 
      $(this).addClass('show-arrow'); // Show the arrow image 
     } 
});

現場演示： http://jsfiddle.net/dreamweiver/MHg67/3/

編碼快樂:)

來源

2014-05-07 13:03:36 dreamweiver

這一條可能只是爲你工作：

$('#menu > li').click(function() { 
    $('ul li a').removeClass('show-arrow'); 
    $(this).has('ul.sub-menu').addClass('show-arrow'); 
}

你可以根據需要進行修改以滿足您的需求。謝謝！

來源

2014-05-07 13:18:25 gmzmel

點擊錨點，如何瞄準沒有任何UL的LI

回答

相關問題