javascript - jQuery next() 找不到查找元素或返回 console.log()

Question

我有两个同名的 div。第一个包含用户可以单击以转到新页面的链接，以及一个下拉箭头以打开下一个包含更多 anchor 标记的 div。它看起来像这样:

<div class="container-div">
    <a class="link-1">Men</a>
    <span class="dropdown-arrow"></span>
</div>
<div class="container-div">
  <a class="link-2">Featured</a>
  <a class="link-2">Sale</a>
</div>

现在，当用户单击 span.dropdown-arrow 时，第二个容器 div 将打开，显示 .link-2 链接。当用户单击 Men 链接 (a.link-1) 时，它还会打开第二个容器 div 并将用户带到一个新页面。我希望这样当用户单击“.link-1”时，第二个容器 div 不会打开(保持为显示:无)。

这是我的 jQuery:

 function mobileMainNav(){

        $('a.link-1').click(function(){
            window.location = $(this).attr('href');
        }); 

        $('a.link-1').click(function(){
            var showNone = $(this).parent().next('div.container-div').css('display', 'none');
            console.log(showNone);
        }); 
    }; 

此功能的第一部分起作用，将用户带到新窗口。但是第二部分根本不起作用，控制台中也没有任何记录。我做错了什么？

Answer 1

因此调用 stopImmediatePropagation，但它只有在事件以正确的顺序附加时才会起作用。

$("button").on("click", function (e) {
  console.log(1);
  e.stopImmediatePropagation()
});
$("button").on("click", function (e) {
  console.log(2);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>a</button>