javascript - 切换与单击的 ID 相同的 div

Question

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

它目前正常工作，但不完全正常。我试图实现的是切换一个与点击元素匹配的 div - 但我也希望能够再次点击该元素并隐藏匹配的 div。

我怎样才能做到这一点？随意使用 jsFiddle http://jsfiddle.net/oczfefaa/9/

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

Answer 1

试试这个:您正在为所有隐藏所有(包括点击的 div)的 div 添加 hide 类，因此在 toggleClass 上它将显示 div，尽管它已经可见。尝试向所有 div 添加 hide 类，除了单击的 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.
    });

});

JSFiddle link