仅针对父级而非子级单击事件

Question

我需要在我的导航中添加点击事件，但我只希望事件为父级，而不是子菜单。

我必须做什么？

＆＃13;

＆＃13;

$(document).ready(function() {
  $('nav ul li a').click(function() {
    alert('test');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
    <ul>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
        <li>
            <a href="#">Test</a>
            <ul>
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
            </ul>
        </li>
        <li><a href="#">Test</a></li>
        <li>
            <a href="#">Test</a>
            <ul>
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
                <li><a href="#">Test</a></li>
            </ul>
        </li>
    </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/usbwLkjp/

Answer 1

更改您的css选择器以定位此类直接后代

$('nav > ul > li > a')

Answer 2

$(document).ready(function() {
           
  $('nav>ul>li>a').click(function(e) {
   
    alert('test');
  
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li>
                <a href="#">Test</a>
                <ul>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                </ul>
            </li>
            <li><a href="#">Test</a></li>
            <li>
                <a href="#">Test</a>
                <ul>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                </ul>
            </li>
        </ul>
    </nav>

Answer 3

您可以使用箭头>定位直接儿童

 $(document).ready(function() {               
      $('nav > ul > li > a').click(function() {
        alert('test');
      });    
 });

<强> DEMO HERE

Answer 4

这适合您：

$(document).ready(function() {
           
  $('nav>ul>li>a').click(function() {
    alert('test');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li>
                <a href="#">Test</a>
                <ul>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                </ul>
            </li>
            <li><a href="#">Test</a></li>
            <li>
                <a href="#">Test</a>
                <ul>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test</a></li>
                </ul>
            </li>
        </ul>
    </nav>