Скрыть DIV после клика (jQuery)

Question

Скрыть DIV после клика (jQuery)

0

У меня есть элемент списка, который отображает скрытый 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/

Благодарю.

Chris 17 фев. 2014, в 20:12

Источник

1

api.jquery.com/toggle
Blazemonger 17 фев. 2014, в 18:56

Теги:

javascript

jquery

html

css

4 ответа

3

Вы можете использовать fadeToggle()

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

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

user1633525 17 фев. 2014, в 16:29

0

Единственная проблема заключается в том, что если вы нажмете на один div и попытаетесь открыть другой, он не скроет первый div.
Chris 17 фев. 2014, в 19:04
0

@Chris Для этого случая вы можете использовать некоторый идентификатор в ссылке и в div. Затем, когда ссылка нажата, скрипт берет этот идентификатор и скрывает определенный div.
user1633525 17 фев. 2014, в 19:09

0

Вы можете проверить, имеет ли класс текущий ток и соответственно ли его исчезновение:

$("#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

David 17 фев. 2014, в 17:58

0

Вы можете использовать свойства jquery для переключения.

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

Вы можете проверить эти ссылки

Geylani ARCA 17 фев. 2014, в 16:13

Ещё вопросы

Единственная проблема заключается в том, что если вы нажмете на один div и попытаетесь открыть другой, он не скроет первый div.
@Chris Для этого случая вы можете использовать некоторый идентификатор в ссылке и в div. Затем, когда ссылка нажата, скрипт берет этот идентификатор и скрывает определенный div.

melvas · Accepted Answer · 2014-02-17T17-06-00.000Z

вы просто можете добавить оператор "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/