twitter-bootstrap twitter bootstrap 下拉链接不起作用
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18543976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap dropdown links not working
提问by user1629366
I am using bootstrap version 2.0
我正在使用引导程序版本 2.0
I have the following html structure -
我有以下 html 结构 -
Now when I click on the Filter by Teamthe dropdown shows properly. Now when I click on the link, I should be taken to the page. But the links do notwork. I mean, when I click on the dropdown elements, they should take me to a url, which they are href'ed to, this does not happen.
现在,当我单击Filter by Team下拉菜单时正确显示。现在当我点击链接时,我应该被带到页面。但链接也不能正常工作。我的意思是,当我点击下拉元素时,它们应该带我到一个 url,它们被href'ed 到,这不会发生。
<li style="margin-left: 12px;">
<div class="dropdown" style="margin-top: 5px;">
<a class="dropdown-toggle" style="margin-left: -2px;" data-toggle="dropdown" href="#">
Filter by Team
</a>
<ul class="dropdown-menu" data-toggle="dropdown" role="menu" aria-labelledby="dropdownMenu">
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/8/">funvilla</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/6/">Dev Team</a>
</li>
<li class="divider"></li>
<li>
<a tabindex="-1" class="disabled" href="/task/list/orgteam/5/">Design Team</a>
</li>
<li class="divider"></li>
</ul>
</div>
</li>
The fiddle can be found here - http://jsfiddle.net/ktgrw/
小提琴可以在这里找到 - http://jsfiddle.net/ktgrw/
回答by koala_dev
The problem is that you have the data-toggleattribute set for the <ul>, that attribute is just for the link that you want to open/close the dropdown, remove it and the links should work.
问题是您为data-toggle设置了属性<ul>,该属性仅用于您要打开/关闭下拉列表的链接,将其删除,链接应该可以工作。
Here's the updated fiddlewith the correct bootstrap version and the attribute removed.
这是更新后的小提琴,具有正确的引导程序版本并删除了属性。
Also the disabledclass is used on the toggle link to prevent the opening of the dropdown, you should remove it from your links since it's not serving any real purpose.
另外,disabled曲柄连杆上用于防止下拉开幕类,你应该从你的链接,因为它没有投放任何真正的目的将其删除。
回答by Priya Ranjan Singh
The links are working perfectly fine. When we use relative links like href="/task/list/orgteam/5/"we need to be sure that we are running this page on a website where these links exist.
链接工作得很好。当我们使用相关链接时,href="/task/list/orgteam/5/"我们需要确保我们在存在这些链接的网站上运行此页面。
To add to clarity, I added a link to google as the last list item in this new fiddle (click here to view)and because it uses absolute url href="http://www.google.com", it works just fine.
为了清楚起见,我添加了一个指向 google 的链接作为这个新小提琴中的最后一个列表项(单击此处查看),并且因为它使用了绝对 url href="http://www.google.com",所以它工作得很好。
回答by Amit
I faced same problem with bootstrap framework and at the end got the solution (worked for me). Import all your required javascripts, mainly jquery.js.
我在 bootstrap 框架中遇到了同样的问题,最后得到了解决方案(对我有用)。导入所有需要的 javascripts,主要是jquery.js。

