jQuery Accordion：链接不起作用

发布于 2024-07-10 03:32:13 字数 965 浏览 5 评论 0原文

我正在使用 jQuery 的 accordion UI 元素开发一个页面。我根据该示例对 HTML 进行了建模，但在

元素内，我有一些无序列表的链接。像这样：

  $(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 -->

问题：链接不起作用

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

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

原文

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:

  $(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 collapse instead 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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

卖梦商人 2024-07-17 03:32:14

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

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

By default, the accordian widget sets all the links to headers. To change it, you need to specify a selector with the headers option. So, your code would look like this:

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

回复收藏 0 原文

缱绻入梦 2024-07-17 03:32:14

尝试添加一个内联 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 功能。

Try adding an inline onlick that prevents event bubbling:

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

Or a domready event like so:

$(".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.

回复收藏 0 原文

皓月长歌 2024-07-17 03:32:14

我遇到了完全相同的问题，但在任何地方都找不到答案。事实上，一些消息人士称这是不可能完成的。

经过进一步的研究，我确实找到了一个可行的解决方案。可能不是很好，但它就像一个魅力。

首先，只需确保您想要可点击且不受手风琴控件影响的链接易于识别。我有自己的课程。

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

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

});

本质上，这会侦听何时单击折叠式标题内的链接。当它出现时，手风琴会暂时禁用，使其无法正常发射。然后，在本例中，在新窗口中打开链接，但您也可以使用 document.location

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

希望这对某人有帮助！

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

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!

回复收藏 0 原文

淡淡绿茶香 2024-07-17 03:32:14

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

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

回复收藏 0 原文

甜妞爱困 2024-07-17 03:32:14

AlwaysOpen 应该是 true。

回复收藏 0 原文

顾北清歌寒 2024-07-17 03:32:14

可能我的建议是不使用 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>

希望这会有所帮助。

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.

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>

Hope this helps.

回复收藏 0 原文