jQuery的多重顯示和隱藏 - 如果顯示一個

Question

你好，我環顧四周，似乎無法找到我的確切問題，但隱藏他人。

我所擁有的是多列閱讀更多的按鈕，當切換滑動以顯示帶有額外內容的隱藏div時，該按鈕隨後在其切換並單擊時隱藏div再次變爲關閉。

但是我似乎無法使下一個按鈕關閉之前的股利和開設自己。

這裏是我的代碼：

$('#slidebtn-1').click(function() { 
    $('#slidecontent-1').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 
$('#slidebtn-2').click(function() { 
    $('#slidecontent-2').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 
} 

HTML：

<div class="col"> 
    Content 
    <div id="slidecontent-1" class="hide"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-1" class="more-btn" href="#slidecontent-1">Read more</a> 
</div> 
<div class="col"> 
    Content 
    <div id="slidecontent-2" class="hide"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-2" class="more-btn" href="#slidecontent-2">Read more</a> 
</div> 

任何幫助將不勝感激！

乾杯

Answer 1

我覺得有點失落，當涉及到你的問題的解釋與你的代碼：你的意思是你想關閉「＃slidecontent-1」，當你點擊「＃slidebtn-2」，反之亦然？

如果是這樣的話，@奧菲爾 - 巴魯克的評論是最合適的：你可能想要一個通用的功能。

你可以讓每個按鈕的內容區域添加一個屬性，例如：sliderDown：true或者其他東西，然後每當點擊其中一個按鈕時，讓它滑過任何div的sliderDown：true，從該div中移除該attr，將其添加到其自己的內容div，並滑動它自己的div。這裏有一個的jsfiddle一個鏈接一個例子：

http://jsfiddle.net/willbuck/NvXQt/1/

感謝這對jQuery的元素相等測試： How would you compare jQuery objects?

Answer 2

我會強烈建議使用類都隱藏/顯示按鈕，隱藏的內容領域。你不需要爲每個按鈕編寫一個事件處理程序，但有一個適用於具有相同功能的所有元素。事情是這樣的：

<div class="col"> 
    Content 
    <div id="slidecontent-1" class="hide content"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-1" class="more-btn" href="#slidecontent-1">Read more</a> 
</div> 
<div class="col"> 
    Content 
    <div id="slidecontent-2" class="hide content"> 
     Hidden content goes here 
    </div> 
    <a id="slidebtn-2" class="more-btn" href="#slidecontent-2">Read more</a> 
</div> 

而事件代碼：

$('.more-btn').click(function() { 
    $('.content-open').slideToggle(500).toggleClass('content-open'); 
    $(this).parent().find('.content').slideToggle(500).toggleClass('content-open'); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 

Answer 3

據我瞭解，沒有slidecontent 1和2之間 反應如果你想slidecontent1被關閉（被後當slidecontent2已被「激活」時，您需要爲其他幻燈片內容添加一個動作。 例如：

$('#slidebtn-1').click(function() { 
    $('#slidecontent-1').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 
$('#slidebtn-2').click(function() { 
    $('#slidecontent-2').slideToggle(500); 
    $(this).text($(this).text() == 'Read more' ? 'Close' : 'Read more'); 
    $('#slidecontent-1').slideToggle(500); 
    $('#slidecontent-1').text($('#slidecontent-1').text() == 'Read more' ? 'Close' : 'Read more'); 
    return false; 
}); 

的事實是，它會更effecient使用一般功能用於切換那些slidecontents並在此函數的循環（。每），將關閉所有其他幻燈片。