jQuery next()找不到find元素或返回console.log()

Question

我有两个同名的div。第一个包含一个链接，用户可以单击该链接以转到一个新页面，以及一个下拉箭头，用于打开包含更多锚标记的下一个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-箭头时，第二个容器div打开，显示.link-2链接。当用户单击Men链接(a.link-1)时，它还会打开第二个容器div，并将用户带到一个新页面。我希望当用户单击".link-1“时，第二个容器div不会打开(保持display:none)。

这是我的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>

​