Question

我正在使用jQuery UI accordion()。我有4个标签。我想制作2个滑动，这是手风琴的工作方式，另外2个只是普通链接而不滑动。我无法弄清楚如何进行正常链接，因为accordion期望<h3>标签后的内容元素

<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 id="test"> div之外，只是正确设置它们的样式？

此外，您可以为标题设置不同的选择器，这将禁用该项目。例如：我将最后两个链接更改为h2并将accordion设置为使用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>

希望这会有所帮助。干杯

jQuery ui手风琴正常链接

4 个答案:

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