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或者其他东西，然后每当点击其中一个按钮时，让它滑动任何div当前有slidDown：true，从该div中删除该attr，添加它到它自己的内容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），它将关闭所有其他幻灯片。

Jquery多次显示和隐藏 - 但如果显示其他人则隐藏其他人

3 个答案: