用于打开/关闭手风琴的外部按钮

Question

我需要帮助来打开或关闭带有额外按钮的手风琴。

以下是带按钮的手风琴的例子：

$(function() {
    $( "#tab1" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
    $( "#tab2" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<div id="tab1">
    <h3>Tab 1</h3>
    <div>1234567890 Text</div>
</div>
<div id="tab2">   
    <h3>Tab 2</h3>
    <div>1234567890 Text 2</div>
</div>
<button><span>Open/Close Tab1</span></button>
<button><span>Open/Close Tab2</span></button>

感谢您的帮助！

Answer 1

您可以手动触发点击事件：

＆＃13;

＆＃13;

if

＆＃13;

$(function() {
    $( "#tab1" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
    $( "#tab2" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });

    $('button').first().click(function(){
        $('h3').first().click();
    });
    $('button').last().click(function(){
        $('h3').last().click();
    });
});

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用＆＃34;有效＆＃34;来自手风琴的API：http://api.jqueryui.com/accordion/#option-active。

＆＃13;

＆＃13;

$(function() {
    $( "#tab1" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
    $( "#tab2" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
    $('.toggle-tab').on('click', function(){
      var $accordion = $('#tab' + $(this).data('tab'));
      var state = $accordion.accordion('option', 'active');
      $accordion.accordion('option', {active: state === 0 ? false : 0 });
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<div id="tab1">
    <h3>Tab 1</h3>
    <div>1234567890 Text</div>
</div>
<div id="tab2">   
    <h3>Tab 2</h3>
    <div>1234567890 Text 2</div>
</div>
<button class="toggle-tab" data-tab="1"><span>Open/Close Tab1</span></button>
<button class="toggle-tab" data-tab="2"><span>Open/Close Tab2</span></button>

＆＃13;

＆＃13;

＆＃13;