Question

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

Here's一个jsFiddle，显示我正在尝试做什么。它在那里工作得很好，但由于某些原因，相同的代码不适用于my site。当我单击以显示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}

Answer 1

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

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

更改为：

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

Answer 2

好像你需要在最后portfolioItem之后插入一个明确的div。我尝试在Chrome中使用它，它也在你的网站上工作：

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

Answer 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/

Answer 4

一旦效果完成，您可以通过将css（）函数应用于元素来更改元素样式。喜欢：

$（divId）.css（“background-color”，“＃if”）; $（divId）.css（“border-left”，“5px solid #ccc”）;

或

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

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

4 个答案: