Jquery多个显示和隐藏 - 但如果显示一个则隐藏其他

Question

您好，我环顾四周，似乎找不到我的确切问题。

我所拥有的是多个带有阅读更多按钮的列，当切换时向下滑动以显示带有额外内容的隐藏 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>

任何帮助将不胜感激！

干杯

Answer 1

当谈到您的问题解释与您的代码时，我感到有点失落：您的意思是当您单击“#slidebtn-2”时要关闭“#slidecontent-1”，反之亦然？

如果是这种情况，@ofir-baruch 的评论是最恰当的：您可能需要一个通用函数。

您可以让每个按钮向其内容区域添加一个属性，例如 slidDown: true 或其他内容，然后每当单击这些按钮之一时，让它滑动切换当前具有 slidDown: true 的任何 div，从该 div 中删除该属性，添加它到它自己的内容 div，并 slideToggle 它自己的 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

据我了解，幻灯片内容 1 和 2 之间没有反应。 如果您希望在 slidecontent2 已“激活”时关闭（打开后） slidecontent1，您需要为其他幻灯片内容包含一个操作。 例如：

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

事实是，使用通用函数来切换这些幻灯片内容并在此函数中包含一个循环 (.each) 将关闭所有其他幻灯片会更有效。