javascript - 打开/关闭 Accordion 的外部按钮

Question

我需要帮助来打开或关闭带额外按钮的 Accordion 。

这是带按钮的 Accordion 示例:

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

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

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

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