Question

我有一系列input按钮。让我们说两个简单。每个按钮在一个单独的div中有自己的相关内容。所有内容都以不可见的div（display: none）开头。

如果单击某个按钮，则会显示其关联的内容。如果再次单击它，内容将消失。这是通过toggle()完成的。问题是，如果单击一个按钮然后单击另一个按钮，则两个 div现在都可见。

所以我的主要问题是解决这个问题的最佳方法。我尝试的解决方案不起作用，所以如果你有一个全新的方法，请告诉我，或者如果你可以改进我的方法来使其工作，那也会很棒。好的，关于我如何解决这个问题。

要解决此问题，我使用siblings()确保所有内容divs在新的内容div出现之前都不可见。

现在，如果我点击1，它就会出现。如果我点击2，1消失，2出现.....但现在，如果我再次点击1没有任何反应（因为这是我第二次点击数字1，和toggle()分别跟踪每个按钮）

如何在不遇到这些问题的情况下实现此类内容切换？

（在真实页面上有一个未知数量的button / div组合，用户可以按任意顺序点击它们）

Here's an example of the problem code (click 1, 2, then 1)

谢谢！

看起来答案可能是使用.trigger('click')和:visible的问题...只是在使其无法正常工作时出现问题......

Answer 1

试试这个：http://jsfiddle.net/TennG/

Answer 2

要获得所需的结果，请为每个div保持状态分开（通过使用类来表示隐藏和可见，并且不要使用切换功能。

$("input").click(
    function(event) {
        var theDiv = $("#d" + $(event.target).attr('id'));
        var wasHidden = theDiv.hasClass("hiddenDiv");
        $(".visibleDiv").removeClass("visibleDiv").addClass("hiddenDiv");
        if(wasHidden){
            theDiv.removeClass("hiddenDiv").addClass("visibleDiv");
        }
    }
)

div div.hiddenDiv {
    display: none;
}
div div.visibleDiv {
    display: inline:
}

<input id="i1" type="button" value="one" />
<input id="i2" type="button" value="two" />
<div>
    <div id="di1" class="hiddenDiv ">This is the first one.</div>
    <div id="di2" class="hiddenDiv ">And here we have number two.</div>
</div>

该技术可归纳如下

从隐藏所有div开始
发生点击时，请查看相关的div，看看它是否隐藏
从拥有它的所有div中删除可见类，并替换为隐藏类
如果之前隐藏了div，则删除隐藏的类并替换为可见类。

无法切换多个div的可见性，因为toggle（）会分别跟踪每个元素

2 个答案: