使用与点击相同的 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

使用 toggle 而不是 toggleClass

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

    });

});

Answer 2

试试这个：您正在为所有 div 添加 hide class，这将隐藏所有内容（包括点击的 div），因此在 toggleClass 上它将显示div 尽管它已经可见。尝试将 hide class 添加到所有 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

Answer 3

每次点击你添加 class 和切换只能删除 class...

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

使用与点击相同的 ID 切换 div

Toggle div with same id as clicked

javascript

jquery

toggle

jsfiddle