javascript - 如何在使用 slideToggle() 显示/隐藏后更改 div 样式

Question

我正在使用 .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}

Answer 1

缺少一个“;”每个类的最后一个属性可能意味着浏览器误读了 CSS

box-shadow:inner 0 0 5px #888}

更改为:

box-shadow:inner 0 0 5px #888;}