Question

如何使用外部控件（按钮/锚点）打开和关闭Jquery UI Accordion小部件。

Answer 1

我自己想出来，如下所示。假设这是你的jquery UI，由四个手风琴组成。

        <div id="accordion" class="accordion">
        <div>
            <h3><a href="#">First</a></h3>
            <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
        </div>

        <div>
            <h3><a href="#">Second</a></h3>
            <div>Phasellus mattis tincidunt nibh.</div>
        </div>

        <div>
            <h3><a href="#">Third</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
        </div>

       <div>
            <h3><a href="#">Fourth</a></h3>
            <div>Nam dui erat, auctor a, dignissim quis.</div>
        </div>


    </div>

现在添加具有不同ID

的外部锚点

    <!-- Enternal Anchor Mossawir -->
    <div>
     <a href="#" id="openfirst">Open 1st</a>
     <a href="#" id="opensecond">Open 2nd</a>
    <a href="#" id="openthird">Open 3rd</a>
    <a href="#" id="openfourth">Open 4th</a>
    </div>

现在添加jquery代码。

         $(function(){

         $("#accordion").accordion({ header: "h3" });


        //this will open 1st accordian.
        $('#openfirst').click(function(){
                  $(".accordion").accordion({active:0});
            });

        //this will open 2nd accordian.
         $('#opensecond').click(function(){
                  $(".accordion").accordion({active:1});
            });

        //this will open 3rd accordian.
            $('#openthird').click(function(){
                  $(".accordion").accordion({active:2});
            });


        //this will open 4th accordian.
       $('#openfourth').click(function(){
                  $(".accordion").accordion({active:3});
            });

        });

要添加更多的手风琴和锚点，只需向锚点添加一个新的id，在jquery代码中将给出其活动参数。 active：0表示第1个手风琴，有效：1表示第二个手风琴，依此类推。这适用于Jquery UI手风琴。以下是一个示例：http://jsfiddle.net/ZRBc6/1/

Answer 2

.accordion( "activate" , index )

会为你做这件事。索引可以是零索引数，以匹配要关闭的标头的位置或匹配元素的选择器。通过

false

关闭所有（仅限

）

collapsible:true

）。

Answer 3

我在各个部门外面的按钮上创建了一个手风琴外观。这就是它的外观。

<!DOCTYPE html>
<html>
<head>
<script>
function doFunction(buttonId) {
    if(buttonId=="1"){
    document.getElementById("collapseTwo").className = "panel-collapse collapse";
    document.getElementById("collapseThree").className = "panel-collapse collapse";
    }
    if(buttonId=="2"){
    document.getElementById("collapseOne").className = "panel-collapse collapse";
    document.getElementById("collapseThree").className = "panel-collapse collapse";
    }
    if(buttonId=="3"){
    document.getElementById("collapseTwo").className = "panel-collapse collapse";
    document.getElementById("collapseOne").className = "panel-collapse collapse";
    }
}
</script>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="container">
  <h2>Simple Collapsible</h2>
  <button id="id1" type="button" class="btn btn-info" onclick="doFunction('1');" data-toggle="collapse" data-target="#collapseOne">Simple collapsible1</button><br/>
  <button id="id2" type="button" class="btn btn-info" onclick="doFunction('2');" data-toggle="collapse" data-target="#collapseTwo">Simple collapsible2</button><br/>
  <button id="id3" type="button" class="btn btn-info" onclick="doFunction('3');" data-toggle="collapse"  data-target="#collapseThree">Simple collapsible3</button><br/>


<div id="demu"  style="padding-left:15%">
   <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

</body>
</html>

Answer 4

对于Open，您可以使用具有要打开的元素索引的活动方法

$('#accordion').accordion({
  active:0
});

关闭

$('#accordion').accordion({
  active:false
});

您可以在后面的小提琴中引用自定义的JQuery UI Accordion Sample https://jsfiddle.net/Kuldipg/35xp2w0f/

jquery ui widget手风琴打开外部按钮控制

4 个答案: