使用 slideToggle() 显示/隐藏后如何更改 div 样式答案

【问题标题】：How to change div styles after showing/hiding with slideToggle()使用 slideToggle() 显示/隐藏后如何更改 div 样式
【发布时间】：2013-09-22 13:36:48
【问题描述】：

我正在使用 .slideToggle() 在我的投资组合页面上显示和隐藏一些 div。当显示 div 时，我想应用一个盒子阴影和背景，使其看起来像是坐在托盘上。

Here's 一个 jsFiddle，它显示了我正在尝试做的事情。它在那里完美运行，但由于某种原因，相同的代码无法在my site 上运行。当我单击以显示 div 时，box-shadow 会出现片刻，但在 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}

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

改为：

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

【讨论】：

【解决方案2】：

看来您需要在最后一个 portfolioItem 之后插入一个清晰的 div。我尝试在 chrome 中进行以下操作，它也可以在您的网站上运行：

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

【讨论】：

【解决方案3】：

您页面上的问题是您的个人投资组合项目向左浮动，并且它们的父容器 .portfolioItemContainer 没有垂直扩展以包含它们。

解决问题的一种方法是在浮动 div 下方插入一个空 div，并将其设置为 clear: both。但这不是一个好的解决方案，因为您必须插入无关的标记。

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

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

.portfolioItemContainer:after {
    clear: both;
}

或者您可以将其抽象为 clearfix 类，您可以在此处和其他任何需要的地方应用该类。看到这个：http://nicolasgallagher.com/micro-clearfix-hack/

【讨论】：

【解决方案4】：

效果完成后，您可以通过对元素应用 css() 函数来更改元素样式。喜欢：

$(divId).css("背景色", "#ffe"); $(divId).css("border-left", "5px solid #ccc");

或

document.getElementById('divId').style.-moz-box-shadow = 1px 1px 1px #000;

【讨论】：