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

【问题标题】：Redirecting to a different link when button is clicked单击按钮时重定向到不同的链接
【发布时间】：2017-03-28 09:23:03
【问题描述】：

我有一个包含以下内容的 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 类时指向首页 href。

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

【问题讨论】：

你想隐藏

标签： javascript jquery css

【解决方案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>

【讨论】：

【解决方案2】：

只需将display: none; 添加到<ul class="sidr-class-dropdown-menu> 即可隐藏它。

【讨论】：