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

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”下拉开关

我想用CSS隐藏sidr类下拉菜单的内容，只显示一个类“sidr类下拉开关”，这样它就可以点击第一个链接。

Answer 1

只需添加显示：无 至

Answer 2

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

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

css lang-css prettyprint-override">.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>