javascript - 单击按钮时重定向到不同的链接

Question

我有一个包含以下内容的 sidR 菜单:

<li class="sidr-class-dropdown">
    <a href="#" class="sidr-class-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">News</a>
    <ul class="sidr-class-dropdown-menu>
        <li>
            <a href="/website/page1">Page 1</a>
        </li>
        <li>
            <a href="/website/page2">Page 2</a>
        </li>
        <li>
            <a href="/website/page1">Page 3</a>
        </li>
    </ul>
</li>

每个页面的href是未知的，cms给它一个id。

虽然 a class="sidr-class-dropdown-toggle"> 有一个 href，但它不是正确的链接，我如何在单击 a class 时定向到第一页 href。

我想用 CSS 隐藏 sidr-class-dropdown-menu 的内容，只显示一个类“sidr-class-dropdown-toggle”，以便点击第一个链接。

Answer 1

您想捕获点击事件，阻止默认操作，然后显示菜单并强制点击找到的第一个 a 元素。

$('.sidr-class-dropdown-toggle').on('click', function(event) {
  event.preventDefault();
  $('.sidr-class-dropdown-menu').show().find('li:first-child a')[0].click();
});

.sidr-class-dropdown-menu {
  display: none;
}

.sidr-class-dropdown-menu a:visited {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidr-class-dropdown">
  <a href="#" class="sidr-class-dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">News</a>
  <ul class="sidr-class-dropdown-menu">
    <li>
      <a href="#page1">Page 1</a>
    </li>
    <li>
      <a href="#page2">Page 2</a>
    </li>
    <li>
      <a href="#page3">Page 3</a>
    </li>
  </ul>
</div>