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

【问题标题】：How to open a specific accordion div?如何打开特定的手风琴 div？
【发布时间】：2014-02-26 05:01:48
【问题描述】：

这似乎是一个直截了当的问题，但我似乎找不到答案。我正在尝试扩展、打开、折叠（无论你怎么称呼它）一个特定的手风琴。假设我有三个面板，ID 为 #panel1、#panel2 和 #panel3。我的面板标题带有#p1、#p2、#p3。

如果我单击标题一切正常，#p1 将打开#panel1，就像手风琴应该如何工作一样。但是我在页面上有一个单独的链接，我希望它打开#panel2。

slideToggle 和 slideDown 会导致问题，因为如果您单击后面的标题，它会与手风琴混淆。我不想使用哈希，所以我将它添加到 onclick 我要打开 panel2 的链接上。

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

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

【问题讨论】：

您是否尝试读取该面板在单击后是打开还是关闭，以确定 jquery 应该采取什么操作？

标签： javascript jquery html accordion

【解决方案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"));

【讨论】：

谢谢！你写的第二行正是我需要的

【解决方案2】：

使用“开放”类：如果它有开放类，则关闭它并删除“开放”类。否则，打开它，并添加一个“开放”类。而不是使用外部链接单击它，只需向上滑动并添加开放类。这是一个非常基本的 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();
});

【讨论】：

谢谢！使每个人的所有解决方案都有效:)

【解决方案3】：

这应该可以解决问题：

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

【讨论】：

谢谢，.click(函数变成了另一种实现方式