Question

我有一个带有内容的sidR菜单：

<dependency mavenUrl="com.google.dagger:dagger-compiler:2.0.2" gradleConfiguration="apt"/>
<dependency mavenUrl="javax.annotation:javax.annotation-api:1.2" gradleConfiguration="provided" />

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

虽然a class =“sidr-class-dropdown-toggle”＆gt;有一个href它不是一个正确的链接，如何点击一个类时直接到第一页href。

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

Answer 1

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

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();
});

.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 个答案: