css - 单击时设置 css 样式并在单击时将其删除

Question

我想在点击div时设置样式。我做了这个，它的工作。但我希望在单击时以及在单击时设置默认样式。

     $('#tray-button').click(function() {
       $('.buttons-content').css('bottom', '160px');
    });

 <div class="buttons-content">
        <div id="tray-button" class="button">
            <div class="white"></div>
            <div class="black"></div>
            <i class="fas fa-grip-horizontal"></i>
        </div>
        <div class="button">
            <div class="white"></div>
            <div class="black"></div>
            <i class="fas fa-share-alt"></i>
        </div>
        <div class="button play-pause play">
            <div class="white"></div>
            <div class="black"></div>
            <i class="far fa-1-1x  fa-play-circle"></i>
        </div>
        <div class="button rotate">
            <div class="white"></div>
            <div class="black"></div>
            <i class="fas fa-expand-alt"></i>
        </div>
    </div>

按钮内容 - 默认底部:40；

1. 当点击#tray-button -> bottom: 160px;
2. 再次点击#tray-button -> bottom: 40px; (默认)

Answer 1

定义一个特定的 CSS 规则，例如

.buttons-content.toggled {
   bottom: 160px;
}

使用 .toggled 类并在 click 上切换该类

$('#tray-button').click(function() {
   $('.buttons-content').toggleClass('toggled');
});

当类被删除时，元素的样式将自动重置为以前的状态。此外，您的脚本更易于维护，因为样式未在其中进行硬编码。