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