Question

我有一个网站，我无法更改HTML，我只能注入JavaScript和CSS。该网站的下拉菜单在Android上无法正常运行。父菜单也是一个链接，当人们点击它时，他们将被带到父母的链接而不是打开子/子菜单。

HTML（简化）

<ul id="menu">
    <li>
        <a href="">Parent menu ▼</a>
        <ul>
            <li><a href="">Submenu link</a></li>
            <li><a href="">Submenu link</a></li>
            <li><a href="">Submenu link</a></li>
        </ul>
    </li>
    <li>
        <a href="">Parent menu link</a>
    </li>
</ul>

我有这个jQuery：

var topmenuclicked == 0;
$("#menu > li a").click(function(event){

    event.preventDefault();

    if (topmenuclicked == 0) {
        topmenuclicked = 1;
    } else {
        topmenuclicked = 0;
        window.location.href = $(this).attr('href');
    }

});

这有点乱，而不是解决这个问题的最佳方法，但我的主要问题是只选择具有子菜单的a元素。

使用现在的代码，我必须两次点击所有父菜单链接，我不确定原因。

所以我需要能够说出像$("#menu > li:has(ul) a)这样的内容，但我认为不行。

Answer 1

使用儿童（“ul”）。李元素的长度

$("#menu > li a").click(function(event){


     //use $(this).parent().children("ul").length   
     if($(this).closest("li").children("ul").length) {
       event.preventDefault();
       // the clicked on <li> has a <ul> as a direct child
     }

    if (topmenuclicked == 0) {
        topmenuclicked = 1;
    } else {
        topmenuclicked = 0;
        window.location.href = $(this).attr('href');
    }

});

Answer 2

之前的答案不起作用，因为子菜单不在A标签内，但其余的都很好。

以下是如何解决的问题：

$('#menu > li a').on('click', function (event) {
    if ($(this).next('ul').length) {
        event.preventDefault();
        // Parent link clicked
    } else {
        // Nested link clicked
        // The ELSE part can be removed if custom logic is not needed
    }
});

另一种选择可以是：

$('#menu > li > a').on('click', function (event) {
    event.preventDefault();
    // Parent link clicked
});

$('#menu > ul a').on('click', function (event) {
    // Nested link clicked
});

Answer 3

您可以使用parents。另外，请使用.on代替.click

$('#menu').on('click', 'li a', function(event){
    event.preventDefault();
    
    var topmenuclicked = 0;
    if($(this).parents('ul').length == 1) {
      topmenuclicked = 1;
    }
    
    console.log('topmenuclicked -> ', topmenuclicked)

   // do your stuff here

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="menu">
    <li>
        <a href="">Parent menu ▼</a>
        <ul>
            <li><a href="">Submenu link</a></li>
            <li><a href="">Submenu link</a></li>
            <li><a href="">Submenu link</a></li>
        </ul>
    </li>
    <li>
        <a href="">Parent menu link</a>
    </li>
</ul>

Answer 4

put＆gt;在...之前。见下文

var topmenuclicked == 0;
$("#menu > li > a").click(function(event){

event.preventDefault();

if (topmenuclicked == 0) {
    topmenuclicked = 1;
} else {
    topmenuclicked = 0;
    window.location.href = $(this).attr('href');
}

}）;

Answer 5

部分原因是因为@ Love-Kesh他的解决方案，我提出了这个似乎有效的方法。

$("#menu > li a").click(function(event){

    // save parent in variable
    var clickedlinkparent = $(this).parent();

    // check if parent has any ul element as children
    if (clickedlinkparent.children('ul').length) {

        // prevent the link from opening
        event.preventDefault();

        // if link has not been clicked, do nothing
        if (topmenuclicked == 0) {
            topmenuclicked = 1;
        // if link has already been clicked, go to href
        } else {
            topmenuclicked = 0;
            window.location.href = $(this).attr('href');
        }
    }
});

对具有链接和另一个列表的列表进行preventDefault

5 个答案: