![](/img/trans.png)
[英]In Angular 9 how to allow only one toggle in div to be active at a given time?
[英]Allow only one slide toggle div to show at a time
我在一個使用jquery的幻燈片切換功能有4個可擴展div的網站上工作。 一切正常,但我不想一次擴展多個div。 換句話說:當div擴展時,其他已擴展的div應該關閉。 我認為手風琴不是一個選擇,因為所有div的樣式都不同。 下面是我的代碼。
$(document).ready(function(){
// slidetoggles
$("#tgx-window").hide();
$("#tgx-button").show();
$("#tgs-window").hide();
$("#tgs-button").show();
$("#tgm-window").hide();
$("#tgm-button").show();
$("#tgl-window").hide();
$("#tgl-button").show();
$('#tgx-button').click(function(){
$('#tgx-button').toggleClass('closebutton');
$("#tgx-window").slideToggle();
});
$('#tgs-button').click(function(){
$('#tgs-button').toggleClass('closebutton');
$("#tgs-window").slideToggle();
});
$('#tgm-button').click(function(){
$('#tgm-button').toggleClass('closebutton');
$("#tgm-window").slideToggle();
});
$('#tgl-button').click(function(){
$('#tgl-button').toggleClass('closebutton');
$("#tgl-window").slideToggle();
});
HTML:
<a onclick="" class="show_hide" id="<?=strtolower($service['title']);?>-button"></a>
<div class="slidingDiv" id="<?=strtolower($service['title']);?>-window">
<?
$infoBox = '<h1>'.$service['subtitel'].'</h1>';
$infoBox .= $service['description'];
echo replaceTags($infoBox);
?>
</div>
不知道您的HTML很難回答這個問題,但是我希望這是一個解決方案。
HTML(我認為):
<div id="tgx-window">tgx window</div>
<div id="tgs-window">tgs window</div>
<div id="tgm-window">tgm window</div>
<div id="tgl-window">tgl window</div>
<button id="tgx-button">Show tgx</button>
<button id="tgs-button">Show tgs</button>
<button id="tgm-button">Show tgm</button>
<button id="tgl-button">Show tgl</button>
JavaScript:
jQuery(function($) {
var $windows = $('#tgx-window,#tgs-window,#tgm-window,#tgl-window'),
$buttons = $('#tgx-button,#tgs-button,#tgm-button,#tgl-button');
$windows.hide();
$buttons.on('click', function(e) {
var $id;
e.preventDefault();
$buttons.removeClass('closebutton');
$id = $('#' + this.id.split('-')[0] + '-window');// Get window id
$windows.slideUp();
if(! $id.is(':visible') ) {
$id.slideDown();
$(this).addClass('closebutton');
}
});
});
您可以在此處看到一個有效的示例。
使用class
而不是按鈕的id
以及它的父.tgx-window
$('.tgx-button').click(function(){
$(this).toggleClass('closebutton');
$(this).closest(".tgx-window").slideToggle();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.