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

<小时/> 另请阅读Class Attribute

.toggleClass()

.removeClass()

this

<小时/> .toggle()已deprecated and removed

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

单击div时隐藏内容

4 个答案: