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>

buttons-content-默认底部：40；

点击＃托盘按钮->底部：160像素；
再次单击＃托盘按钮->底部时：40像素；（默认）

Answer 1

定义特定的CSS规则，例如

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

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

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

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

Answer 2

此脚本只记住最后一个状态，并做您想做的事。

$( document ).ready(function() {
var stack = 0
$("#tray-button").click(function()
{
if (stack === 0){
}
$('.buttons-content').css('bottom', '160px');
stack = 1;
}else{
$('.buttons-content').css('bottom', '40px');
stack = 0;
}

});

在点击时设置CSS样式，并在点击时将其删除

2 个答案: