jQuery Accordion:链接不起作用

Nat*_*ong 4 jquery accordion

我正在使用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 -->
Run Code Online (Sandbox Code Playgroud)

问题:链接不起作用

在我测试的所有浏览器中,这些手风琴菜单中的链接会导致手风琴部分折叠而不是将您带到链接页面.(我仍然可以右键单击并转到链接的站点.)

这可能是某种点击绑定问题吗?

Mat*_*ley 9

默认情况下,accordian小部件将所有链接设置为标题.要更改它,您需要使用该headers选项指定选择器.所以,你的代码看起来像这样:

$(".ui-accordion-container").accordion(
   { active: "a.default", ...,  header: "a.accordion-label" }
);
Run Code Online (Sandbox Code Playgroud)


Dan*_*ski 6

尝试添加内联onlick以防止事件冒泡:

...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
Run Code Online (Sandbox Code Playgroud)

或者像这样的domready事件:

$(".toggle-title a").click(function(event){ event.stopPropagation()})
Run Code Online (Sandbox Code Playgroud)

然而后者不适合我,即使代码明智有意义,jQuery执行点击!任何可以向我解释的人都会感到自由,我来自MooTools和具有addEvent功能的Google Closure背景.