1

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

这是一个 jsFiddle，它显示了我正在尝试做的事情。它在那里工作得很好，但由于某种原因，相同的代码在我的网站上不起作用。当我单击以显示 div 时，box-shadow 会出现片刻，但在 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}
4

4 回答 4

1

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

$("<div/>").css({'clear':'both','height':'1px !important','width':'99%'})
    .insertAfter($("#portfolioContainer1").find(".portfolioItem3"))
于 2013-09-02T23:38:24.450 回答
1

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

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

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

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

.portfolioItemContainer:after {
    clear: both;
}

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

于 2013-09-02T23:42:18.743 回答
1

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

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

改成：

box-shadow:inner 0 0 5px #888;}
于 2013-09-02T23:12:13.523 回答
0

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

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

或者

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

于 2013-09-03T10:11:52.727 回答