jQuery Accordion：链接不起作用答案

【问题标题】：jQuery Accordion: links don't workjQuery Accordion：链接不起作用
【发布时间】：2023-03-03 01:26:01
【问题描述】：

我正在使用 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 -->

问题：链接不起作用

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

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

【问题讨论】：

标签： jquery accordion

【解决方案1】：

默认情况下，accordian 小部件将所有链接设置为标题。要更改它，您需要使用 headers 选项指定选择器。因此，您的代码将如下所示：

$(".ui-accordion-container").accordion(
   { active: "a.default", ...,  header: "a.accordion-label" }
);

【讨论】：

一直在寻找这个答案！但是请注意，如果您正在寻找它，这段代码可能在 bootstrap.js 中，而不是在手风琴.js 文件中。
@Matthew Crumley 这个答案对我有用，但我有 $(...).accordion 不是控制台中的功能警告。有什么建议吗？谢谢

【解决方案2】：

尝试添加防止事件冒泡的内联 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 和具有 addEvent 功能的 Google Closure 背景。

【讨论】：

这是唯一对我有用的东西（可能是因为我有一个嵌套的手风琴）。而且我确实能够使用 domready 事件。

【解决方案3】：

我遇到了同样的问题，但在任何地方都找不到答案。事实上，一些消息人士表示，这只是无法完成。

在继续玩之后，我确实找到了一个可行的解决方案。可能不是很好，但它就像一个魅力。

首先，确保您希望可点击且不受手风琴控件影响的链接易于识别。我有一堂课。

 $('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));

setTimeout ( function() {
  expander.accordion('enable');
}, 250 );

});

本质上，它会监听手风琴标题内的链接何时被点击。如果是这样，手风琴会暂时禁用，使其无法正常发射。然后在新窗口中打开链接，但您也可以使用 document.location

如果我们立即重新启用手风琴，它仍然会触发并切换手风琴。我发现超短超时提供了足够的延迟。

希望这对某人有所帮助！

【讨论】：

【解决方案4】：

这是一个非常简单的解决方案

http://www.designerstalk.com/forums/help-me/41297-jquery-accordion-embedding-links-help-needed.html

【讨论】：

【解决方案5】：

AlwaysOpen 应该为真。

【讨论】：

【解决方案6】：

可能是我的建议是不使用手风琴（）函数，[我以前不知道，谢谢你提出来 :)] 但仍然展示了如何拥有手风琴 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>

希望这会有所帮助。

【讨论】：

【解决方案7】：

解决方案 http://www.colorizate.com/jquery-acordion-hack-link-interno/

【讨论】：

【解决方案8】：

对于仍然遇到此问题的任何人，这是一个可能的替代脚本： http://twostepmedia.co.uk/notes/development/jquery-accordion/

【讨论】：

【解决方案9】：

正如我对你其他问题的回答所说：

 navigation: true

应该在你的选项列表中设置。

【讨论】：

这对我没有帮助。文档说“如果设置，则查找与 location.href 匹配的锚点并激活它。”