Как скрыть элемент при втором нажатии

Question

Я хочу скрыть элемент после первого щелчка (используя jQuery), чтобы пользователь не мог видеть и щелкать элемент после этого.

Как я могу это сделать?

Спасибо.

Answer 1

Очень просто:

$("selector").click(function() { $(this).hide(); });

"selector" выше будет любым допустимым jQuery селектором (например, ".click-to-hide", чтобы все элементы с классом click-to-hide имели такое поведение).Скрытие элемента выполняется с помощью метода jQuery hide (есть также show, если вы хотите сделать элементы видимыми позже).

Если вы не собираетесь делатьЧто-нибудь вообще с элементами после того, как они впервые скрыты, вы также можете рассмотреть remove вместо hide.

Обновление: Чтобы сделать что-то по второму щелчку, вам нужно помнить, когда щелчок уже был сделан по элементу.Если это не станет более сложным, вы можете использовать класс для этой цели:

$("selector").click(function() {
    var $this = $(this);
    if ($this.hasClass("clicked-once")) {
        // already been clicked once, hide it
        $this.hide();
    }
    else {
        // first time this is clicked, mark it
        $this.addClass("clicked-once");
    }
});

Если вы хотите посчитать количество кликов, вы можете использовать dataфункция для хранения количества кликов, полученных элементом:

$("selector").click(function() {
    var $this = $(this);

    // Current click count is previous click count +1
    var clickCount = ($this.data("click-count") || 0) + 1;

    // Save current click count
    $this.data("click-count", clickCount);

    if (clickCount == 1) {
        $this.hide();
    }
});

Answer 2

Я не могу комментировать, но я думаю, что код, который я использую, работает лучше, чем оригинальный ответ.

$("#slider").click(function() {
    if ($('#slider').hasClass("clicked-once")) {
			$('#menu').slideUp(1000);
			$('#slider').removeClass("clicked-once");
    }
    else {
			$('#slider').addClass("clicked-once");
			$('#menu').slideDown(1000);
    }
});

Это намного проще и сжатее.