我正在使用jQuery的accordion UI element处理页面。我在该示例上对我的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 -->
在我测试的所有浏览器中,这些手风琴菜单中的链接会导致手风琴部分崩溃,而不是将您带到链接页面。 (我仍然可以右键单击并转到链接的站点。)
这可能是某种点击绑定问题吗?
答案 0 :(得分:9)
默认情况下,accordian小部件设置所有指向标题的链接。要更改它,您需要使用headers
选项指定选择器。所以,你的代码看起来像这样:
$(".ui-accordion-container").accordion(
{ active: "a.default", ..., header: "a.accordion-label" }
);
答案 1 :(得分:5)
尝试添加内联onlick以防止事件冒泡:
...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
或者像这样的domready事件:
$(".toggle-title a").click(function(event){ event.stopPropagation()})
然而后者对我来说不起作用,即使代码明智有意义,jQuery也会执行点击!任何可以向我解释的人都会感到自由,我来自MooTools和Google Closure背景,它们具有addEvent功能。
答案 2 :(得分:4)
我遇到了同样的问题,无法在任何地方找到答案。事实上,有几位消息人士说它无法完成。
进一步播放后,我找到了一个有效的解决方案。可能不是很好,但它就像一个魅力。
首先,只需确保您想要点击的链接,并且对手风琴控件免疫,很容易识别。我上了一堂课。
$('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));
setTimeout ( function() {
expander.accordion('enable');
}, 250 );
});
基本上,这会在单击手风琴标题内的链接时进行侦听。如果是,手风琴会暂时停用,使其不再正常射击。然后在新窗口中打开该链接,但您也可以使用document.location
如果我们立即重新启用手风琴,它仍会触发并拨动手风琴。我发现超短暂超时提供了足够的延迟。
希望这有助于某人!
答案 3 :(得分:2)
这是一个非常简单的解决方案
http://www.designerstalk.com/forums/help-me/41297-jquery-accordion-embedding-links-help-needed.html
答案 4 :(得分:0)
AlwaysOpen应该是真的。
答案 5 :(得分:0)
可能是我的建议是没有使用accordion()函数,[我之前不知道,谢谢你提出来:)但仍然显示如何拥有一个Accordion UI元素。
<强> 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 强>
<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 强>
<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>
希望这有帮助。
答案 6 :(得分:0)
答案 7 :(得分:0)
对于仍然遇到此问题的人,这是一个可能的替代脚本: http://twostepmedia.co.uk/notes/development/jquery-accordion/
答案 8 :(得分:-1)
正如我对你的另一个问题的回答所说:
navigation: true
应在您的选项列表中设置。