0

你知道如何打开一个隐藏\显示剧透，然后打开另一个，它使页面真的很长吗？

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

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

$(document).ready(function(){


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

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

});

hide1 = 点击后打开的内容 剧透1 = 切换按钮。

Spoiler2,3,4 是其余的剧透，hide2,3,4 是其余的内容。

这是现场直播：

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

例子：

您单击第一个框，顺便说一下，这是框区域：

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

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

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

我该怎么做？

顺便说一下糟糕的语法对不起。

谢谢！

4

3 回答 3

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/

于 2012-10-02T20:47:57.157 回答
0

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

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

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

于 2012-10-02T20:47:28.700 回答
0

既然你在做显示和隐藏，就这样做

$('.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')

所以如果有打开的类它会删除打开的，不需要专门定位。当然，如果您只想定位那些已经打开的，那么

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

更新

在这里看小提琴http://jsfiddle.net/YE2bY/

于 2012-10-02T20:49:38.840 回答