Question

这似乎是一个直截了当的问题，但我似乎无法找到答案。我正试图扩展，打开，折叠（无论你想称之为）一种特定的手风琴。假设我有三个面板，其中包含ID＃panel1，＃panel2和＃panel3。我有＃p1，＃p2，＃p3的面板标题。

如果我点击标题，一切都很好，＃p1会打开＃panel1，就像手风琴应该如何工作一样。但我在页面上有一个单独的链接，我希望它打开＃panel2。

slideToggle和slideDown导致问题，因为如果你点击之后的标题，它会与手风琴混淆。我不想使用哈希，所以我在onclick上添加了这个我要打开panel2的链接。

$("#p2").click();

这很好用，除非你再次点击该链接，它会关闭手风琴div，我希望它保持开放状态。有任何想法吗？非常感谢。

Answer 1

您可以通过setting the active option激活第二个面板。

$("#accordion").accordion("option", "active", 1);

或者假设您的手风琴HTML是默认的jQuery UI语法（header / div / header / div / etc。），您可以使用$("#panel2").index("#accordion div")

实用地获取面板的索引

$("#accordion").accordion("option", "active", $("#panel2").index("#accordion div"));

Answer 2

使用'open'类：如果它有open类，请关闭它并删除'open'类。否则，打开它，并添加一个“开放”类。而不是使用外部链接单击它，只需将其向上滑动并添加打开的类。这是一个非常基本的jquery手风琴。 http://jsfiddle.net/L8fMq/2/

<style>
.contents {display:none; border: 1px solid #ccc; }
.header {padding: 10px; border: 1px solid #ccc; background-color: #ddd;
</style>

<a class='externalLink'>Open Panel 2</a>
<div class='panel panel1'>
    <div class='header'>Panel 1</div>
    <div class='contents'>
        <p>A bunch of content</p>
    </div>
</div>
<div class='panel panel2'>
    <div class='header'>Panel 2</div>
    <div class='contents'>
        <p>A bunch of content</p>
    </div>
</div>
    <div class='panel panel3'>
    <div class='header'>Panel 3</div>
    <div class='contents'>
        <p>A bunch of content</p>
    </div>
</div>

$('.panel .header').click(function(){
    if($(this).parent().hasClass("open")){
        $(this).parent().find(".contents").slideUp();
        $(this).parent().removeClass("open");
    }
    else {
        $(this).parent().find(".contents").slideDown();
        $(this).parent().addClass("open");
    }
        $(this).parent().siblings().find(".contents").slideUp();
    });
$('.externalLink').click(function(){
    $('.panel2 .contents').slideDown().parent().addClass("open");

    $(this).parent().siblings().find(".contents").slideUp();
});

Answer 3

这应该可以解决问题：

$("#p2").click(function () {
    $("#accordion").accordion("option", "active", 1);
});

如何打开特定的手风琴div？

3 个答案: