Question

我正在尝试使带有红色框阴影的div更改为CSS（例如，不同的颜色）。

但是我也试图使其变回原样（用于引导折叠）

到目前为止，我发现的是：

<script>
$(function () {
    $(".sbox").click(function () {
        $(this).css('box-shadow', '0 0 30px blue');
    });
});
</script>

但这只会更改一次，而不会更改。

当前的CSS如下：

.sbox {
    color: white;
    background-color: #0c0c0c;
    max-width: 50%;
    max-height: 15%;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 80px;
    border-radius: 5px;
    box-shadow:0 0 30px #960000;
    cursor: pointer;
}

似乎找不到其他东西

Answer 1

由于您使用的是jQuery，请尝试使用toggleClass。

地址。 css：

.sboxOpen {
     box-shadow: 0 0 30px blue;
}

您的脚本变为：

<script>
$(function () {
    $(".sbox").click(function () {
        $(this).toggleClass('sboxOpen');
    });
});
</script>

JS小提琴：https://jsfiddle.net/nmhrfa8y/4/

Answer 2

也许是这样的：

为此元素添加参数shadow：

$(function () {
    $(".sbox").click(function () {
    	if($(this).attr('shadow')=='blue'){
    	  $(this).css('box-shadow', '0 0 30px #960000').attr('shadow','purple');
    	}else{
          $(this).css('box-shadow', '0 0 30px blue').attr('shadow','blue');
        }
    });
});

.sbox {
    color: white;
    background-color: #0c0c0c;
    max-width: 50%;
    max-height: 15%;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 80px;
    border-radius: 5px;
    box-shadow:0 0 30px #960000;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sbox">test</div>

Answer 3

仅出于完成目的，要跟踪Pepperjack的答案，请使用pure JS alternative IE10 +。

var sbox = document.querySelector('.sbox');
sbox.classList.toggle('sboxOpen');

单击更改div阴影，然后再次单击

3 个答案: