單擊div時隱藏內容

Question

我正在創建一個新網站，我想在點擊時添加一個隱藏網站某些部分的按鈕。 現在我正在使用下面的代碼，它工作正常，但我只需要它做一件事。 如何在單擊按鈕時為按鈕添加新類，以便我可以使用css重新定位單擊的按鈕？ 提前致謝！

這是我正在使用的js代碼。

$(".hide-content").click(function() {
    $(".site-header, #page-entry, .site-footer").toggle(500);
    });

$(".hide-content").toggle(function() {
      $(this).text("Hide");
    }, function() {
      $(this).text("Show");
    });
});

Answer 1

試試.addClass（）

$(".hide-content").click(function() {
    $(".site-header, #page-entry, .site-footer").toggle(500);
    $(this).addClass('ClassName'); //add class
});

---

還讀取類屬性

.toggleClass（）

.removeClass（）

這個

---

.toggle（）已被棄用並刪除

Answer 2

$(".hide-content").click(function () {
    $(".hide-content").addClass("new-class")
    $(".site-header, #page-entry, .site-footer").toggle(500);
});

Answer 3

$("body").on('click', '.hide-content', function (e) {
    var $el = $(this);
    $(".site-header, #page-entry, .site-footer").toggle(500, function () { //when complete..
        $el.addClass('myclass');
    });
});

Answer 4

使用addClass函數

$(".hide-content").click(function() {
  $(this).addClass("class-name")
  $(".site-header, #page-entry, .site-footer").toggle(500);
});

或者你可以使用.css函數直接在jquery上做css

$(".hide-content").click(function() {
  $(this).css("position", "absolute"); //note that params in css function is only an example, do what you need..
  $(".site-header, #page-entry, .site-footer").toggle(500);
});