单击锚点时，如何定位没有任何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');
}

您可以对其进行相应的修改以适合您的需求。 谢谢！