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");
});

You chould check this links

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
    }
});

单击后隐藏DIV（jQuery）

4 个答案:

JSFiddle