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

如何使用外部控件(按钮/锚点)打开和关闭 Jquery UI Accordian小部件. 我自己想出来了,如下图所示.
假设这是你的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/