jquery ui 小部件手风琴打开与外部按钮控件

问题描述

如何使用外部控件(按钮/锚)打开和关闭 Jquery UI Accordian 小部件.

解决方案

我自己想通了，如下图.假设这是您的 jquery UI，由四个手风琴组成.

 <div id="accordion" class="accordion">
<h3><a href="#">第一</a></h3><div>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</div></div>
<h3><a href="#">第二个</a></h3><div>Phasellus mattis tincidunt nibh.</div></div>
<h3><a href="#">第三</a></h3><div>Nam dui erat, auctor a, dignissim quis.</div></div>
<h3><a href="#">第四</a></h3><div>Nam dui erat, auctor a, dignissim quis.</div></div></div>

现在添加具有不同 ID 的外部锚

 <!-- 内锚莫萨维尔-->
<a href="#" id="openfirst">第一次打开</a><a href="#" id="opensecond">打开第二个</a><a href="#" id="openthird">打开第三个</a><a href="#" id="openfourth">第 4 次开放</a></div>

现在添加 jquery 代码.

 $(function(){$("#accordion").accordion({ header: "h3" });//这将打开第一个手风琴.$('#openfirst').click(function(){$(".accordion").accordion({active:0});});//这将打开第二个手风琴.$('#opensecond').click(function(){$(".accordion").accordion({active:1});});//这将打开第三个手风琴.$('#openthird').click(function(){$(".accordion").accordion({active:2});});//这将打开第四个手风琴.$('#openfourth').click(function(){$(".accordion").accordion({active:3});});});

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

how can i open and close Jquery UI Accordian widget with external control (button/anchor).

解决方案

I figured it out by myself, as shown below.Suppose this is your jquery UI according consisting of four accordians.

        <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>

Now add external anchors with their different ID's

    <!-- 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>

Now add jquery code.

         $(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});
            });

        });

To add more accordions and anchor, simply add an new id to anchor and in jquery code will give its active parameter. active:0 means 1st accordion, active:1 means the second accordian and so on. this works for Jquery UI accordion.Here is an example: http://jsfiddle.net/ZRBc6/1/

这篇关于jquery ui 小部件手风琴打开与外部按钮控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！