單擊錨點時，如何定位沒有任何UL的LI

Question

我有一個簡單的菜單，該菜單的錨點內有一個箭頭。 我有jQuery，它添加了一個類以在單擊時顯示箭頭。 但是，如果單擊的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>

在此示例中，如果單擊“ TopLevel_LinkOne”或“ TopLevel_LinkTwo”，則我不希望箭頭顯示。 我無法刪除箭頭圖像，因為它是由Wordpress中的nav walker自動添加的。

這是我的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
        }
 });    

Answer 1

嘗試這個：

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

Answer 2

嘗試，

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
    }
 });

Answer 3

如果您的HTML允許您做出某些假設，則可以非常輕松地完成此操作。

例如，如果安全地假設您的列表項將只包含“僅一個<a>元素” 或 “一個<a>元素后跟一個子菜單”，那么您可以執行以下操作：

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

但是，如果您需要魯棒性，可以這樣做：

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

Answer 4

嘗試這種方式

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/

快樂編碼:)

Answer 5

這可能適合您：

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

您可以對其進行相應的修改以適合您的需求。 謝謝！