Javascript 如何在使用slideToggle（）显示/隐藏后更改div样式

我正在使用.slideToggle（）在我的公文包页面上显示和隐藏一些div。当显示div时，我想应用一个方框阴影和背景，使其看起来像是放在托盘上

一个jsFiddle，显示我正在尝试做什么。它在那里工作得很好，但出于某种原因，相同的代码无法工作。当我单击以显示div时，长方体阴影会出现一段时间，但在slideToggle动画完成后会很快消失。知道为什么吗？我觉得某个地方一定有一种风格覆盖了盒子的阴影，但我不知道它可能是什么

以下是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;}

---

似乎您需要在最后一个

portfolioItem

之后插入一个清晰的div。我在chrome中尝试了以下内容，它也在您的网站上运行：

$("<div/>").css({'clear':'both','height':'1px !important','width':'99%'})
    .insertAfter($("#portfolioContainer1").find(".portfolioItem3"))

css（{'clear'：'both'，'height'：'1px！important'，'width'：'99%}） .insertAfter（$（“#portfolioContainer1”）.find（“.portfolioItem3”））

---

页面上的问题是，您的个人投资组合项目向左浮动，并且它们的父容器

。portfolioItemContainer

没有垂直扩展以包含它们

解决此问题的一种方法是在浮动的div下面插入一个空div，并将其设置为

clear:both

。但这不是一个好的解决方案，因为您必须插入无关的标记

相反，对父容器应用clearfix技术来解决问题。这是一个很好的例子：

.portfolioItemContainer:before,
.portfolioItemContainer:after {
    content: " "; 
    display: table; 
}

.portfolioItemContainer:after {
    clear: both;
}

---

或者您可以将其抽象为一个

clearfix

类，您可以在这里和任何其他需要的地方应用该类。请参见：

效果完成后，您可以通过对元素应用css（）函数来更改元素样式。比如：

$（divId）.css（“背景色”，“#ffe”）； $（divId）.css（“左边框”，“5px实心”#ccc”）

或

document.getElementById（'divId'）.style.-moz-box-shadow=1px 1px 1px#000