單擊后隱藏DIV（jQuery）

Question

我有一個列表項，單擊后會顯示一個隱藏的div。 如果列表項再次單擊，我希望能夠隱藏div。 我怎樣才能做到這一點？

$(function () {
    "use strict";
    function resetTabs() {
        $("#sub_content > div").hide(); //Hide all content
        $("#tabs a").removeClass("current"); //Reset id's
    }

    $("#sub_content > div").hide(); // Initially hide all content

    $("#tabs a").on("click", function (e) {
        e.preventDefault();
        resetTabs();
        $(this).addClass("current"); // Activate this
        $($(this).attr('name')).fadeIn(); // Show content for current tab
    });
});

http://jsfiddle.net/E9mPw/

謝謝。

Answer 1

您可以使用fadeToggle（）

$($(this).attr('name')).fadeToggle();

http://jsfiddle.net/E9mPw/2/

Answer 2

如果您只想修復腳本，則可以添加“ if”語句

$("#tabs a").on("click", function (e) {
    e.preventDefault();
    if($(this).hasClass('current')){            
    resetTabs();
    }
    else{
    resetTabs();
    $(this).addClass("current"); // Activate this
        $($(this).attr('name')).fadeIn(); // Show content for current tab
    }
});

http://jsfiddle.net/E9mPw/7/

Answer 3

您可以使用切換jquery屬性。

$("#tabs a").on("click", function (e) {
    e.preventDefault();
    resetTabs();
    $(this).toggle("current");
});

您應該檢查此鏈接

Answer 4

您可以檢查a是否具有當前類，並相應地將其淡出：

$("#tabs a").on("click", function (e) {
    e.preventDefault();
    //resetTabs();

    if($(this).hasClass("current"))
    {
       $(this).removeClass("current");
       $($(this).attr('name')).fadeOut(); // Hide content for current tab
    }
    else
    {
        $(this).addClass("current"); // Activate this
        $($(this).attr('name')).fadeIn(); // Show content for current tab
    }
});

的jsfiddle