Question

你知道如何打开一个hide \ show扰流板，然后打开另一个，这会让页面真的很长吗？

它的解决方案是让js检查类是否显示，如果是，请关闭扰流板。

但我不知道该怎么做。这是使用的js代码：

$(document).ready(function(){


    $(".hide1").hide();
    $(".spoiler1").show();

    $('.spoiler1').click(function(){
    $(".hide1").slideToggle();
    });

});

hide1 =点击时打开的内容 spoiler1 =切换按钮。

Spoiler2,3,4是剩下的剧透所以hide2,3,4是剩下的内容。

这是现场网站：

http://justxp.plutohost.net/slyfiles/index.html

实施例

您点击第一个框顺便说一句，这就是盒子区域：

http://gyazo.com/5df95ee77b95dfd932eab781955f98f3.png?1349209216

好吧，它打开了，然后点击第二个.. 内容打开但第一个框尚未关闭。

我希望打开一个新框后关闭第一个框。对所有盒子都这样工作。

我该怎么做？

顺便提一下，对于糟糕的语法表示抱歉。

谢谢！

Answer 1

您应该通过自定义属性将每个spoiler链接到相应的hide：

<div id="spoiler1" data-hidden="hide1" class="spoiler">Spoiler 1</div>
<div id="hide1" class="hide">Hide 1</div>
<div id="spoiler2" data-hidden="hide2" class="spoiler">Spoiler 2</div>
<div id="hide2" class="hide">Hide 2</div>
<div id="spoiler3" data-hidden="hide3" class="spoiler">Spoiler 3</div>
<div id="hide3" class="hide">Hide 3</div>
<div id="spoiler4" data-hidden="hide4" class="spoiler">Spoiler 4</div>
<div id="hide4" class="hide">Hide 4</div>

行为就是这样：

$('.spoiler').click(function() {
    var hiddenid = $(this).data('hidden');
    $('#' + hiddenid).slideToggle();
    $('.hide:not(#' + hiddenid + ')').slideUp();
});

见工作小提琴：http://jsfiddle.net/adrianonantua/dyUwH/

Answer 2

解决这个问题的最简单方法是隐藏所有以“hide”开头的div。将以下代码行添加到onclick处理程序中。选择器查找所有具有以“hide”开头的类的div并隐藏它们。然后展示你想要的那个。

$('div[class^="hide"]').hide();

以下是此选择器的jquery api文档http://api.jquery.com/attribute-starts-with-selector/

Answer 3

由于您正在显示和隐藏，只需执行此操作

$('.spoiler').click(function(){

    // if the current is not open then hide opened
    if( !($(this).is(':visible')) ) {
        $('.spoiler:visible').hide();
    }
    // open new one, you know the code here
});

有很多方法可以做到这一点，你可以轻松添加一个类来打开/隐藏内容，如果你打开类打开项目然后你可以轻松地定位开放类并删除它来关闭它

$('.spoiler').click(function(){

    // if the current is not open then hide opened
    if( !($(this).hasClass('open')) ) {
        $('.spoiler').removeClass('open');
        $(this).addClass('open');
    } else {
        // remove open if you want to close it
    }

});

扰流板将正常关闭并且类打开，具有类似显示块或其他任何东西。当然这不会动画，如果你想要动画，那么你可以使用可见的方式。

我想做的一点对我的编码有很大帮助。如果你添加类，它更干净，你可以使用CSS来控制隐藏和显示方式。当你想要删除已打开的项目时，你不要只针对你刚才说的具体开放

$('.spoiler').removeClass('open')

所以如果有一个打开的类，它会删除open，没有必要专门定位。当然，如果你想只针对已开放的那些

$('.spoiler.open').removeClass('open')

更新

请点击此处http://jsfiddle.net/YE2bY/

jQuery Hide \ show一旦打开一个新的关闭

3 个答案: