Переключить 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

Попробуйте следующее: вы добавляете класс hide для всех div, которые скрывают все (включая щелчок div), и, следовательно, на toggleClass он покажет div, хотя он уже был виден. Попытайтесь добавить класс hide ко всем divs, кроме щелчка.

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

ИСПОЛЬЗОВАНИЯ переключения вместо OG 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"); 

    }); 

});

Answer 3

на каждый клик U добавить класс и тумблер можно удалить только класс ...

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