jQuery 手风琴：链接不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/332384/
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
jQuery Accordion: links don't work
提问by Nathan Long
I'm working on a page using jQuery's accordion UI element. I modeled my HTML on that example, except that inside the <li>elements, I have some unordered lists of links. Like this:
我正在使用 jQuery 的手风琴 UI 元素处理页面。我在该示例上为我的 HTML 建模，除了在<li>元素内部，我有一些无序列表的链接。像这样：
$(document).ready(function() {
$(".ui-accordion-container").accordion(
{active: "a.default", alwaysOpen: true, autoHeight: false}
);
});
<ul class="ui-accordion-container">
<li> <!-- Start accordion section -->
<a href='#' class="accordion-label">A Group of Links</a>
<ul class="linklist">
<li><a href="http://example.com">Example Link</a></li>
<li><a href="http://example.com">Example Link</a></li>
</ul>
<!--and of course there's another group -->
Problem: Links don't work
问题：链接失效
In all browsers I've tested, the links in those accordion menus cause the accordion section to collapseinstead of taking you to the linked page. (I can still right-click and go to the linked site.)
在我测试过的所有浏览器中，这些手风琴菜单中的链接会导致手风琴部分折叠，而不是将您带到链接页面。（我仍然可以右键单击并转到链接的站点。）
Could this be some kind of click binding issue?
这可能是某种点击绑定问题吗？
回答by Matthew Crumley
By default, the accordian widget sets all the links to headers. To change it, you need to specify a selector with the headersoption. So, your code would look like this:
默认情况下，手风琴小部件将所有链接设置为标题。要更改它，您需要指定一个带有headers选项的选择器。因此，您的代码将如下所示：
$(".ui-accordion-container").accordion(
{ active: "a.default", ..., header: "a.accordion-label" }
);
回答by Daniel Sokolowski
Try adding an inline onlick that prevents event bubbling:
尝试添加防止事件冒泡的内联 onlick：
...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
Or a domready event like so:
或者像这样的 domready 事件：
$(".toggle-title a").click(function(event){ event.stopPropagation()})
However the latter didn't work for me even though code wise it makes sense, jQuery executes the click! Anyone that can explain that to me feel free, I come from MooTools and Google Closure background which has addEvent functions.
然而，后者对我不起作用，即使代码明智它是有道理的，jQuery 执行点击！任何可以向我解释这一点的人都可以随意，我来自具有 addEvent 功能的 MooTools 和 Google Closure 背景。
回答by Nathan Long
I had this exact same problem and could not find an answer anywhere. In fact, a couple sources said it just couldn't be done.
我遇到了完全相同的问题，并且在任何地方都找不到答案。事实上，有几位消息人士表示这是不可能的。
Upon further playing, I did find a working solution. May not be great, but it works like a charm.
进一步玩后，我确实找到了一个可行的解决方案。可能不是很好，但它就像一种魅力。
First, just make sure the links you want to be clickable, and immune to the accordion controls, is easily identifiable. I had a class on mine.
首先，只需确保您想要可点击且不受手风琴控件影响的链接易于识别。我有一节课。
$('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));
setTimeout ( function() {
expander.accordion('enable');
}, 250 );
});
});
Essentially, this listens for when a link inside the accordion header is clicked. When it is, the accordion is temporarily disabled, keeping it from firing as normal. The link is then opened, in this case, in a new window but you could use document.location as well
本质上，这会侦听手风琴标题中的链接何时被单击。当它是时，手风琴会暂时禁用，使其无法正常触发。然后在新窗口中打开链接，但您也可以使用 document.location
If we re-enabled the accordion immediately, it will still fire and toggle the accordion. I found that a super-short timeout provides enough delay.
如果我们立即重新启用手风琴，它仍然会触发并切换手风琴。我发现超短超时提供了足够的延迟。
Hope this helps someone!
希望这可以帮助某人！
回答by Nathan Long
回答by Colorizate
回答by fnkymnky
Here is a possible alternative script for anyone still experiencing this issue: http://twostepmedia.co.uk/notes/development/jquery-accordion/
对于仍然遇到此问题的任何人，这是一个可能的替代脚本：http: //twostepmedia.co.uk/notes/development/jquery-accordion/
回答by egyamado
May be my suggestion is not using accordion() function, [ which i didn't know about before, Thank you for bring it up :) ] but still show how to have have an Accordion UI Element.
可能是我的建议是不使用手风琴（）函数，[我以前不知道，谢谢你提出来:)] 但仍然展示了如何拥有手风琴 UI 元素。
HTML
HTML
<body id="body">
<h2>Accordian</h2>
<div id="accordion" class="">
<div class="toggle_all">
<ul class="links">
<li><a class="openall" href="#"><span>Open All</span></a></li>
<li>|</li>
<li><a class="closeall" href="#"><span>Close All</span></a></li>
</ul>
</div>
<!-- toggleAll ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
</div>
<!-- #accordion ends -->
</body>
CSS
CSS
<style type="text/css" >
#body { margin-left:20%; font:12px verdana; }
.accordion { width:500px; }
h3 { margin:0; padding:0; }
.section_title_accordion { float:left; width:500px; margin:2px 0 0; }
.section_title_accordion h3 span { margin:0; float:left; color:#fff; padding:2px 0 3px 10px; }
.section_title_accordion a span { padding-left:20px; }
.accordion_content { border-bottom:1px solid #666666; border-left:1px solid #666666; border-right:1px solid #666666; float:left; padding:5px 3px; }
.accordion_content span.content { margin:5px 0 0; }
.design-gray { background:#003366; }
.design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366; text-decoration:none; }
.design-gray a:hover { text-decoration:underline;}
.on .design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366;}
.accordion_content_hover { background:#ffffcc; color:#000099; }
.toggle_all { padding:20px 0; width:500px; margin-bottom:5px; }
.toggle_all ul { padding:0; margin:0; }
.toggle_all ul li { list-style-type:none; }
.toggle_all .links li { float:left; padding-left:5px; }
.toggle_all .links li a, .toggleAll .links span { color:#666666; }
</style>
jQuery
jQuery
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".accordion_content").hide();
$("a.open").click(function() {
$(this).parents(".accordion").find(".accordion_content").toggle();
$(this).parents(".accordion").toggleClass('on');
return false;
});
$(".accordion_content").mouseover(function() {
$(this).addClass('accordion_content_hover');
return false;
});
$(".accordion_content").mouseout(function() {
$(this).removeClass('accordion_content_hover');
return false;
});
$("a.openall").click(function() {
$(".accordion_content").show();
$(this).parents("#accordion").find(".accordion").addClass('on');
return false;
});
$("a.closeall").click(function() {
$(".accordion_content").hide();
$(this).parents("#accordion").find(".accordion").removeClass('on');
return false;
});
});
</script>
Hope this helps.
希望这可以帮助。
回答by egyamado
AlwaysOpen should be true.
AlwaysOpen 应该是真的。
回答by Pim Jager
As my answer to your other question says:
正如我对你的另一个问题的回答所说：
navigation: true
Should be set in your option list.
应该在您的选项列表中设置。
