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

---

也看過 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功能

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

jQuery的做 css直接