[英]Redirecting to a different link when button is clicked
I have a sidR menu with the contents: 我有一个包含内容的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>
The href of each page is unknown, it is given an id by the cms. 每个页面的href都是未知的,cms为它提供一个ID。
Although the a class="sidr-class-dropdown-toggle"> has a href it isn't a correct link, how do I direct to the first page href when clicking on the a class. 尽管a class =“ sidr-class-dropdown-toggle”>具有href,但它不是正确的链接,但是当单击a类时,如何定向到首页href。
I would like to hide the contents of sidr-class-dropdown-menu with CSS with only the a class 'sidr-class-dropdown-toggle' showing so it clicks through to the first link. 我想用CSS隐藏sidr-class-dropdown-menu的内容,只显示一个类“ sidr-class-dropdown-toggle”,以便它单击到第一个链接。
just add display: none;
只需添加display: none;
to <ul class="sidr-class-dropdown-menu>
to hide it. 到<ul class="sidr-class-dropdown-menu>
来隐藏它。
You want to capture the click event, prevent the default action, then show the menu and force a click on the first a
element found. 您想要捕获click事件,阻止默认操作,然后显示菜单并在找到的第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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.