一次只允許顯示一個滑動切換div

我正在使用jquery的滑動切換使用4個可擴展div的網站上工作。所有的工作都很好，但我不希望同時擴展超過1個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>

來源

2013-03-11 Frank Kluytmans

也發佈你的html代碼 – bipen 2013-03-11 09:13:48

也許你可以用你當前的代碼創建一個[jsfiddle]（http://jsfiddle.net/）？ – 2013-03-11 09:14:00

你可以使用手風琴控制。 – 2013-03-11 09:14:15

這是一個有點難以回答這個問題，不知道你的HTML的id但這裏是我希望的解決方案;

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'); 
     } 
    }); 
});

你可以看到一個工作示例here。

來源

2013-03-11 09:28:45

非常感謝這個解決方案！ :)剩下的唯一問題是，這會弄亂切換類。通過打開另一個div關閉的div的按鈕保持它的切換類。 – 2013-03-11 09:57:10

好的。更新了我的答案。現在''.closebutton'知道了，它可以很好地打開窗戶。 – 2013-03-11 10:16:11

感謝您的幫助:) – 2013-03-11 10:25:12

使用class，而不是按鈕，可能是它的母公司.tgx-window

$('.tgx-button').click(function(){ 
    $(this).toggleClass('closebutton'); 
    $(this).closest(".tgx-window").slideToggle(); 
});

來源

2013-03-11 09:14:45 Adil

一次只允許顯示一個滑動切換div

回答

相關問題