javascript - ul 中有多个链接，但只有第一个链接用于点击事件

Question

我希望用户能够在两个链接之间进行选择，但是，无论他们选择哪一行，它总是运行第一个“href”。

<div class="ddmenu-container">
   <div class="ddmenu 2">
    United States
    <ul style="z-index: 6">
      <li><a href="https://www.yahoo.com"> E-Commerce Portal </a></li> 
      <li><a href="https://www.google.com"> Website </a></li>
    </ul>
   </div>
</div> 

这是我的 jQuery 代码。我假设它一旦找到第一个 href 就会停止运行，但我很好奇如何防止这种情况发生并允许它在单击时选择第二个。

<script type="text/javascript">
  $('.ddmenu.2 ul').click(function(e){
      e.preventDefault();
      window.location = $(this).find('a').attr('href');
  });
</script> 

Answer 1

问题:

很明显，您的代码始终使用第一个链接 href因为您的以下代码:

$('.ddmenu.2 ul').click(function(e){
   e.preventDefault();
   window.location = $(this).find('a').attr('href');
});

您正在将点击附加到 ul然后你写$(this).find('a')因此，当它找到匹配的链接(这是第一个)时，它将继续进行。

解决方案:

您需要更改代码以将点击事件附加到 li元素或直接发送至<a>元素，因此将代码更改为:

$('.ddmenu.2 ul li').click(function(e){
   e.preventDefault();
   window.location = $(this).find('a').attr('href');
});

这样当你调用 $(this).find('a') 时，它只会在单击的 li 内获取元素，因此它将获得正确的链接。