Как создать переключатель или закрыть div?

Question

Как создать переключатель или закрыть div?

0

Я ищу, чтобы переключиться на содержимое div. Я могу показать это, но я не могу понять, как скрыть это снова, и я совершенно не знаком с JS и JQ.

Вот моя скрипка. http://jsfiddle.net/Thelawman/3f9Le/

<div class="action" data-content="#content1">
            About
        </div>
        <div class="content" id="content1">
        Here is my blurb...An amazing blurb<br>
        Blah Blah Blah Blah Blah Blah<br>
        TBlah Blah Blah Blah Blah Blahy<br>
        Blah Blah Blah Blah Blah Blah
        </div>

$("div.action").click (function(){
        var $this = $(this);
        var target = $this.data('content');
        $('div.action').not($this).each(function(){
           var $other = $(this);
           var otherTarget = $other.data('content');
           $(otherTarget).hide();        
        });

        $(target).fadeIn({height: "toggle"}, 1000);

    });

Если у кого-то есть более чистый код или лучший метод, чем у меня, у меня все уши.

Спасибо заранее

TheLawman 25 апр. 2014, в 18:56

Источник

0

Вы хотите скрыть и показать содержимое по клику?
Pratik 25 апр. 2014, в 16:09

Теги:

jquery

drop-down-menu

toggle

hide

3 ответа

0

Чтобы использовать атрибут data-content используйте следующее:

$("div.action").click (function(){
        var $this = $(this);
        var target = $this.data('content');
        $(target).fadeToggle(200);
});

http://jsfiddle.net/3f9Le/3/

alex23 25 апр. 2014, в 14:55

0

Это тоже отлично сработало ... Спасибо за помощь
TheLawman 25 апр. 2014, в 16:17

0

Попробуйте это для своего JQuery.

$("div.action").click (function(){

if ($(".content").is(":visible")) {

    $(".content").fadeOut("slow");

}
else {

    $(".content").fadeIn("slow");

}

});

Ryan Smith 25 апр. 2014, в 14:48

0

Я думаю, что лучше использовать чистый 1-строчный код.
Pratik 25 апр. 2014, в 16:13
0

@PratikJoshi Если переключение элемента - это все, что вам нужно сделать, тогда да, я согласен. Однако могут быть некоторые другие вещи, которые вы хотели бы сделать при показе / скрытии элемента.
Ryan Smith 25 апр. 2014, в 16:15

Ещё вопросы

Вы хотите скрыть и показать содержимое по клику?
Это тоже отлично сработало ... Спасибо за помощь
Я думаю, что лучше использовать чистый 1-строчный код.
@PratikJoshi Если переключение элемента - это все, что вам нужно сделать, тогда да, я согласен. Однако могут быть некоторые другие вещи, которые вы хотели бы сделать при показе / скрытии элемента.

Pratik C Joshi · Accepted Answer · 2014-04-25T13-52-00.000Z

Хорошо использовать код

$("div.action").click (function(){
        $("#content1").fadeToggle();
    });

Рабочая скрипка [FIDDLE] [1] [1]: http://jsfiddle.net/3f9Le/1/

Здесь, когда нажата кнопка DIV, содержащая действие класса, вы показываете, контент. Если он первый раз, еще во второй раз, нажмите "Скрыть", "Снова на 3-м щелчке мыши", скройте 4-й щелчок, Так что последовательность продолжается.

Пожалуйста, примите ответ. если это удовлетворяет вашему требованию. :)