Javascript 切换与单击的id相同的div

我正在尝试独立切换多个div

它目前正在按其应有的方式工作，但并非完全如此。 我试图实现的是切换一个与单击的元素匹配的div，但我也希望能够再次单击该元素并隐藏匹配的div

我怎样才能做到这一点？请随意使用JSFIDLE

---

使用toggle而不是togleClass

$(document).ready(function() {   
    $("ul.menu li a").on("click", function(e) { 
        $("div").addClass("hide");
        e.PreventDefault; 
        var grabID = $(this).attr( "href" );                                
        $('div' + grabID).toggle("hide");

    });

---

}))

试试这个：您正在为所有隐藏所有的div（包括单击的div）添加

hide

class，因此在切换class时，它将显示div，尽管它已经可见。尝试将

hide

类添加到除单击的div之外的所有div

$(document).ready(function() {   
    $("ul.menu li a").on("click", function(e) { 
        e.PreventDefault; 
        var grabID = $(this).attr( "href" );                                
        $('div' + grabID).toggleClass("hide");
        $("div").not('div' + grabID).addClass("hide");//hide all div except clicked one.
    });

});

---

每次单击添加类和切换只能删除类

$(document).ready(function() {   
$("ul.menu li a").on("click", function(e) { 
    e.PreventDefault; 
    var grabID = $(this).attr( "href" );                                
    $('div' + grabID).toggle("hide");
});});

---

不幸的是，这不是我正在寻找的解决办法。它一次只能显示一个div！非常感谢布山！这解决了我的问题。嗨@BhushanKawadkar我如何在这段代码上实现if/else？到目前为止，我得到的是：很抱歉，我没有收到你的问题。为什么你想要if/否则，为了什么？嗨，布山，一切都好：-）我需要它来检查是否可见/是否隐藏。让我可以选择在可见/隐藏时执行其他操作。您可以使用if

is（':visible'）

检查元素是否可见或隐藏，或者使用

hasClass（'hide'）

检查元素是否具有类。检查这个

$(document).ready(function() {   
$("ul.menu li a").on("click", function(e) { 
    e.PreventDefault; 
    var grabID = $(this).attr( "href" );                                
    $('div' + grabID).toggle("hide");
});});