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 に答える