Javascript 切换多个div的可见性时出现问题，因为toggle（）分别跟踪每个元素

我有一系列的

input

按钮。为了简单起见，我们假设两个。每个按钮在单独的div中都有自己的关联内容。所有内容都在不可见的div中（

display:none

）开始

如果单击按钮，将显示其关联的内容。如果再次单击，内容将消失。这是通过

toggle（）

完成的。问题是，如果单击一个按钮，然后单击另一个按钮，两个div现在都可见

所以我的主要问题是解决这个问题的最好方法。我尝试的解决方案不起作用，所以如果您有一个全新的方法，请让我知道，或者如果您可以改进我的方法使其起作用，那也太好了。好的，关于我是如何解决这个问题的

为了解决这个问题，我使用了

sibbines（）

来确保在新的内容div出现之前，所有内容

div

都是不可见的

现在，如果我单击1，它就会出现。如果单击2，1将消失，2将出现。。。。。但是现在，如果我再次单击1，什么也不会发生（因为这是我第二次单击数字1，和

toggle（）

分别跟踪每个按钮

如何实现这种类型的内容切换而不遇到这些问题

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

谢谢

---

---

看起来答案可能是使用

.trigger（'click'）

和

：visible

。。。只是在使其工作时遇到了困难……

尝试以下操作：

尝试以下操作：

为了获得所需的结果，请将每个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>

$（“输入”）。单击(
功能（事件）{
var theDiv=$（“#d”+$（event.target.attr（'id'））；
var wasHidden=第四类（“hiddenDiv”）；
$（.visibleDiv”）.removeClass（“visibleDiv”）.addClass（“hiddenDiv”）；
如果（华盛顿）{
div.removeClass（“hiddenDiv”）.addClass（“visibleDiv”）；
}
}
)
div div.hiddenDiv{
显示：无；
}
div div.visibleDiv{
显示：内联：
}
这是第一个。
这是第二个。

这项技术可以总结如下

从隐藏所有div开始

单击时，查看相关的div，查看它是否被隐藏

从所有具有可见类的div中删除该类，并替换为隐藏类

如果div以前是隐藏的，请移除隐藏的类并替换为可见的类

---

为了获得所需的结果，请将每个div的状态分开（通过使用类来表示隐藏和可见，并且不要使用toggle函数）

$("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>

$（“输入”）。单击(
功能（事件）{
var theDiv=$（“#d”+$（event.target.attr（'id'））；
var wasHidden=第四类（“hiddenDiv”）；
$（.visibleDiv”）.removeClass（“visibleDiv”）.addClass（“hiddenDiv”）；
如果（华盛顿）{
div.removeClass（“hiddenDiv”）.addClass（“visibleDiv”）；
}
}
)
div div.hiddenDiv{
显示：无；
}
div div.visibleDiv{
显示：内联：
}
这是第一个。
这是第二个。

这项技术可以总结如下

从隐藏所有div开始

单击时，查看相关的div，查看它是否被隐藏

从所有具有可见类的div中删除该类，并替换为隐藏类

如果div以前是隐藏的，请移除隐藏的类并替换为可见的类

---

非常好。我没有考虑将它们链接在一起并使用

toggle（）。兄弟姐妹（）在div上，您也不必跟踪状态，因为它总是做正确的事情：关闭时打开，反之亦然。非常好。我没有想过将它们链接在一起，并使用
toggle（）.sibles（）
Cunning-不知道toggle的零参数版本。像往常一样，有一个简单的解决方案摆在你面前。：-）如果你在div上使用toggle（），你也不必跟踪状态，因为它总是做正确的事情：关闭时打开，反之亦然。这很有效。问题是有多组div。每个集合都可以显示一个div，所以我必须为每个集合创建一个新类，这有点麻烦，因为我不知道会提前有多少集合。在这种情况下，@Tim发布的解决方案是一个更好的选择。这很有效。问题是有多组div。每个集合可以显示一个div，所以我必须为每个集合创建一个新类，这有点麻烦，因为我不知道会提前有多少集合。在这种情况下，@Tim发布的解决方案是一个更好的选择。