0

我有以下html结构：

<div class ='profileName'>
   <hr>
   <span class='name'>Content</span>
</div>
<div class ='profile'>
<div class='floatRightImg padded'>
<img src='imgUrl' class='shadow'/>
    </div>
    <p>description</p>
</div>

与以下 CSS 链接：

hr {
color: #CCCCCC;
}

.floatRightImg {
float: right;
}

.profile {
height: 450px;
width: 700px;
margin: auto;
}

.profileName {
width: 700px;
margin: auto;
}

.shadow {
box-shadow: 10px 10px 5px #888888;
}

.padded {
padding: 0 30px 0 15px;
}

.name {
background-color: #FFFFFF;
color: #CCCCCC;
left: 70px;
padding: 0 8px;
position: relative;
top: -20px;
font-weight: bold;
font-size: 20px;
}

.name:hover {
cursor:pointer;
}

我正在使用以下 jQuery 函数：

$(document).ready(function(){

            $(".name").click(function(){
                var toBeSlided = $(this).parent("div").next("div");
                if(toBeSlided.is(":visible")) {
                    toBeSlided.slideUp();
                } else {
                    toBeSlided.slideDown();
                }
            });

        });

一切都按我的意愿工作（当我单击“名称”跨度时，向下滑动显示和隐藏“配置文件”div 的内容。问题是我注意到一个奇怪的效果：浮动图像执行奇怪的是，当我关闭 div 时向上移动，当我打开 div 时向下移动。换句话说，在显示或隐藏内容时它不会保持固定（事实上，它是要隐藏/显示的内容的一部分). 对这种行为有什么可能的解释吗？在此先感谢大家。

这是jsfiddle

4

1 回答 1

1

这是因为您的浮动右侧旁边的 p 元素。 http://jsfiddle.net/6k2wv/3/

<div class ='profileName'>
   <hr>
   <span class='name'>Content</span>
</div>
<div class ='profile'>
    <div class='floatRightImg padded'>
        <img src='http://www.polpenuil.it/convenzioni/images/smile.jpg' class='shadow'/>
    </div>
    <p style="float: left;">description</p>
</div>

注意左边的新浮动。

此外，您可以将 JS 代码简化为：

$(document).ready(function(){
    $(".name").click(function(){
        var toBeSlided = $(this).parent("div").next("div");
        toBeSlided.slideToggle();
    });
});

通常最好的做法是避免串接 .parent/.next 调用。您最终会得到取决于特定 DOM 结构的令人困惑的代码。相反，给元素一个唯一的类并直接在你的事件之外选择它。

$(function(){
    var smileyFace = $(".smiley-face");
    $(".name").click(function(){
        smileyFace.slideToggle();
    });
});
于 2013-03-24T19:35:25.517 回答