外部按鈕打開/關閉手風琴

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

您可以手動觸發click事件：

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

Answer 2

從手風琴的API使用“主動”： http : //api.jqueryui.com/accordion/#option-active 。

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

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