jquery-ui - jquery ui 小部件 Accordion 打开外部按钮控件

Question

如何使用外部控件(按钮/ anchor )打开和关闭 Jquery UI Accordion 小部件。

Answer 1

我自己想出来的，如下图。假设这是由四个 Accordion 组成的 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 的外部 anchor

    <!-- 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});
            });

        });

要添加更多 Accordion 和 anchor ，只需向 anchor 添加一个新的 id，然后在 jquery 代码中将为其提供事件参数。 active:0 表示第一个 Accordion ，active:1 表示第二个 Accordion ，依此类推。这适用于 Jquery UI Accordion 。这是一个例子:http://jsfiddle.net/ZRBc6/1/