jQuery Hide \ show closes once opened a new one

Question

你知道你是如何打開hide \ show spoiler，然後打開另一個，它使頁面真的很長？

它的解決方案是讓js檢查班級是否顯示，如果是則關閉擾流板。

但我不知道如何做到這一點。 這是使用js代碼IM：

$(document).ready(function(){ 


    $(".hide1").hide(); 
    $(".spoiler1").show(); 

    $('.spoiler1').click(function(){ 
    $(".hide1").slideToggle(); 
    }); 

}); 

hide1 =上點擊 spoiler1 =切換按鈕打開的內容。

擾流板2,3,4是其餘的擾流板 所以是隱藏2,3,4是其餘的內容。

這是活的網站：

http://justxp.plutohost.net/slyfiles/index.html

例：

您在第一箱 單擊這是順便boxs區域：

http://gyazo.com/5df95ee77b95dfd932eab781955f98f3.png?1349209216

好吧，它打開，然後點擊第二個.. 而c意圖打開尚未關閉的第一個盒子。

我想打開一個新的後關閉第一個框。 對所有盒子都是這樣工作的。

我該怎麼做？

對不起，語法太糟糕了。

謝謝！

Answer 1

你應該每個spoiler鏈接到它通過自定義屬性對應的hide：

<div id="spoiler1" data-hidden="hide1" class="spoiler">Spoiler 1</div> 
<div id="hide1" class="hide">Hide 1</div> 
<div id="spoiler2" data-hidden="hide2" class="spoiler">Spoiler 2</div> 
<div id="hide2" class="hide">Hide 2</div> 
<div id="spoiler3" data-hidden="hide3" class="spoiler">Spoiler 3</div> 
<div id="hide3" class="hide">Hide 3</div> 
<div id="spoiler4" data-hidden="hide4" class="spoiler">Spoiler 4</div> 
<div id="hide4" class="hide">Hide 4</div>​ 

的行爲將是這樣：

$('.spoiler').click(function() { 
    var hiddenid = $(this).data('hidden'); 
    $('#' + hiddenid).slideToggle(); 
    $('.hide:not(#' + hiddenid + ')').slideUp(); 
});​ 

請參閱w工作會有小提琴：http://jsfiddle.net/adrianonantua/dyUwH/

Answer 2

解決此問題的最簡單方法是隱藏所有以「hide」開頭的div。將以下代碼行添加到您的onclick處理程序。選擇器查找所有具有以「hide」開頭的類並隱藏它們的div。然後只顯示你想要的。

$('div[class^="hide"]').hide(); 

下面是這個選擇jQuery的API文檔，http://api.jquery.com/attribute-starts-with-selector/

Answer 3

因爲你正在做的顯示和隱藏，只是這樣做

$('.spoiler').click(function(){ 

    // if the current is not open then hide opened 
    if(!($(this).is(':visible'))) { 
     $('.spoiler:visible').hide(); 
    } 
    // open new one, you know the code here 
}); 

有方法可以做到這個數字，你可以輕鬆地添加一個類來打開/隱藏內容，如果你添加類開開的項目，那麼你可以很容易地針對公開課，並刪除它來關閉它

$('.spoiler').click(function(){ 

    // if the current is not open then hide opened 
    if(!($(this).hasClass('open'))) { 
     $('.spoiler').removeClass('open'); 
     $(this).addClass('open'); 
    } else { 
     // remove open if you want to close it 
    } 

}); 

擾流板會被常閉和類開放，有一個像顯示塊或什麼的。當然這不會動畫，如果你想要動畫，那麼你可以使用可見的方式。

我想說的一點是在我的編碼中幫了我很多。如果你添加類，它更清潔，你可以使用css來控制隱藏並以某種方式顯示。當要刪除打開的項目，你不需要指定的特定開放你剛纔說

$('.spoiler').removeClass('open') 

所以如果有一個打開類它會刪除開放，就沒有必要專門針對。當然，如果你想要的目標只有那些已經打開，然後

$('.spoiler.open').removeClass('open') 

UPDATE

看到小提琴這裏http://jsfiddle.net/YE2bY/