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并在此函数的循环（。每），将关闭所有其他幻灯片。