Question

我有以下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();
                }
            });

        });

当我点击名称＆＃39; span时，所有内容都按照我的要求运行（向下滑动 - 向上隐藏 - ＆＃39;个人资料的内容。问题是因为我发现了一个奇怪的效果：当我打开div时，浮动图像执行奇怪的向上移动，而当我打开div时浮动图像向下移动。换句话说，它在显示或隐藏内容时不会保持固定（作为事实上，这是要隐藏/展示的内容的一部分。。对这种行为的任何可能的解释？感谢所有人提前。

Here is the jsfiddle

Answer 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();
    });
});

使用jQuery slideDown和slideUp时，奇怪的img转移

1 个答案: