如何创建多次单击按钮的功能

Question

最初我说我是jquery和js的新手：D，我需要在jquery中创建一个函数，在按钮上单击事件后添加一个css规则，我已经完成了它并且它有效：

   $(".resp-toogle").on("click",function() {
    $(".fit").css('top','200px');

});

在这种情况下，当.resp-toogle上有点击操作时，会为fit css类添加一条css规则。但我需要再次点击.resp-toogle，这将是适合类的重置上边距。

我检查了文档并测试了一些东西，但我找不到解决方案。 我知道我需要用jquery进行学习和测试:)。

Answer 1

假设您希望在元素上连续点击以启用/禁用top元素上的.fit CSS定位，您可以使用toggleClass。

首先，在CSS中设置类：

.fit.top {
    top: 200px;
}

然后，在jQuery代码中使用toggleClass()函数：

$(".resp-toogle").on("click",function() {
    $(".fit").toggleClass('top');
});

Example fiddle

Answer 2

你需要的是一种切换按钮，所以试试这个：

添加一个css类

.themargin{
    top: 200px;
}

然后在每次点击时切换班级

$(".resp-toogle").on("click",function() {
    $(".fit").toggleClass('themargin');
});

function docs here