我正在使用 .slideToggle() 在我的投资组合页面上显示和隐藏一些 div。当显示 div 时,我想应用一个框阴影和背景,使它们看起来就像坐在托盘上一样。
Here's一个显示我正在尝试做的事情的 jsFiddle。它在那里工作得很好,但由于某种原因,相同的代码在 my site 上不起作用。 .当我单击以显示 div 时,框阴影会出现片刻,但当 slideToggle 动画完成时,它会很快消失。知道为什么吗?我觉得某处一定有一种样式覆盖了 box-shadow 但我不知道它可能是什么。
这是 Jquery 代码:
$('.portfolioToggle').click(function(e) {
var toggle = $(this),
divId = toggle.attr('href');
$(divId).slideToggle('slow');
$(divId).toggleClass('portfolioSectionVisible', $(this).is(":visible"));
var toggleState = toggle.text() == "-" ? "+" : "-"; //change icon
toggle.hide().text(toggleState).fadeIn("fast");
e.preventDefault();
event.preventDefault();
});
这是 CSS:
.portfolioSection{
clear:left;
float:left;
width:80%;
margin-left:10%;
margin-right:-90%;
padding-left:20px;
padding-right:21px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
word-wrap:break-word;
_display:inline;
_overflow:hidden;
_overflow-y:visible;
padding-left:0;
padding-right:0;
margin-bottom:2.25em;
margin-top:1.5em;
text-shadow:0 2px 0px rgba(255,255,255,0.9)}
.portfolioSectionVisible{
-moz-box-shadow:inset 0 0 5px #888;
-webkit-box-shadow:inset 0 0 5px #888;
box-shadow:inner 0 0 5px #888}
最佳答案
缺少一个“;”每个类的最后一个属性可能意味着浏览器误读了 CSS
box-shadow:inner 0 0 5px #888}
更改为:
box-shadow:inner 0 0 5px #888;}
关于javascript - 如何在使用 slideToggle() 显示/隐藏后更改 div 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18581857/