Jquery多次显示和隐藏

Jquery多次显示和隐藏 - 但如果显示其他人则隐藏其他人(Jquery multiple show and hide - but hide others if one is shown)

你好，我环顾四周，似乎无法找到我的确切问题。

我所拥有的是多个列，其中有一个更多的按钮，当切换向下滑动以显示带有额外内容的隐藏div时，按钮然后在切换时切换为关闭并且一旦点击再次隐藏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>

任何帮助将不胜感激！

干杯

Hello I've looked around and can't seem to find my exact problem.

What I have is multiple columns with a button of read more which when toggled slides down to show the hidden div with the extra content, the button then changes to close when its toggled on and once clicked hides the div again.

However I can't seem to make the next button close the previous div and open its own.

Here is my code:

$('#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>

Any help would be greatly appreciated!

Cheers

最满意答案

当你的问题解释与你的代码相比时，我觉得有点迷失：你是说当你点击“＃slidebtn-2”时你想要关闭“＃slidecontent-1”，反之亦然？

如果是这样的话，@ ofir-baruch的评论是最恰当的：你可能想要一个通用的功能。

你可以让每个按钮向其内容区域添加一个属性，如slidDown：true或者其他东西，然后每当点击其中一个按钮时，让它滑动任何div当前有slidDown：true，从该div中删除该attr，将其添加到其中自己的内容div，并滑动它自己的div。 这是一个带有示例的jsFiddle的链接：

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

相信这对于jquery元素相等性测试： 你如何比较jQuery对象？

I feel a bit lost when it comes to your question explanation vs. your code: did you mean you wanted to close "#slidecontent-1" when you click "#slidebtn-2" and vice versa?

If that's the case, @ofir-baruch 's comment is most proper: you likely want a generic function.

You could have each button add an attribute to its content area like slidDown: true or something, then whenever one of these buttons is clicked, have it slideToggle whatever div currently has slidDown: true, remove that attr from that div, add it to its own content div, and slideToggle its own div. Here's a link to a jsFiddle with an example:

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

Credit to this for the jquery element equality test: How would you compare jQuery objects?