如何在第二次点击时隐藏元素

Question

我想在首次单击元素后隐藏它（使用jQuery），以便用户在此之后无法看到和单击该元素。

我该如何做？

谢谢。

- user198989

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

- Jon

---

谢谢。如何在第二次点击时执行该操作？ - user198989

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

它只是更简单和压缩。

- Greece