jQuery ui 手风琴正常链接

Question

我正在使用 jQuery UI accordion()。我有 4 个标签。我想做 2 个滑动，这就是手风琴的工作方式，另外 2 个只是正常链接而不滑动。我不知道如何进行正常链接，因为手风琴需要

标记后的内容元素

<div id="test">
    <h3><a href="#">One</a></h3>
    <div>
        some text
    </div>
    <h3><a href="#">Two</a></h3>
    <div>
        some text
    </div>
    <h3><a href="whatever.html">Link</a></h3>
    <h3><a href="whatever1.html">Link</a></h3>
</div>

检查 http://jsfiddle.net/3JAkv/

Answer 1

看看手风琴方法（http://jqueryui.com/demos/accordion/），我不认识任何锁定项目不可打开的东西。

为什么不直接使用

 <h3><a href="whatever.html">Link</a></h3>
<h3><a href="whatever1.html">Link</a></h3>

div 的外部并正确设置它们的样式呢？

另外，您可以为标题设置不同的选择器，这将禁用该项目。例如：我将最后两个链接更改为 h2 并将手风琴设置为使用 h3 作为标题：

$('#test').accordion({ header: 'h3' })

您

<h2><a href="whatever.html">Three</a></h2>
<h2><a href="whatever1.html">Four</a></h2>

可以在这里看到它： http://jsfiddle.net/3JAkv/5/

你仍然需要用 CSS 来给它换肤

Answer 2

您可以通过 jquery 更改最后 2 个选项卡的点击：

$('h3 span').slice(2) // accordion adds a span to put the triangle icon
                      // deactivate the click on it
                      // slice(2) to take last 2 tabs
            .click(function(){
    return false;     // deactivate the click
});

$('h3 a').slice(2).click(function(){
    location.href = $(this).attr('href'); // redirect the page to
                                          // the href of current anchor
    return false;                         // deactivate the click
});

jsfiddle: http ://jsfiddle.net/3JAkv/7/

Answer 3

我花了几天时间但终于找到了答案。

按照文档中的建议构建手风琴，并在标题下方使用没有子条目的空 div。那么就需要这两个函数。

//make links work in accordion headers
$("#accordion h3 a").click(function() {
    window.location = "default.html"+$(this).attr('href');
    window.location.reload();
    return false;
});

//cycle through each header, checking if the next div has html and remove ui-icon class if it doesn't
$("#accordion h3").each(function(index) {
    if ($(this).next("div").html() == "") {
        $(this).children("span").removeClass("ui-icon");
    }
});

Answer 4

我认为你应该从手风琴中取出链接：

<div id="textParent">
    <div id="test">
        <h3><a href="#">One</a></h3>
        <div>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        </div>
        <h3><a href="#">Two</a></h3>
        <div>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        </div>
    </div>
    <h3><a href="whatever.html">Three</a></h3>
    <h3><a href="whatever1.html">Four</a></h3>
</div>

希望这会有所帮助。干杯