0

探しているソリューションに近づいていますが、もう 1 つ問題があり、それが私にぴったりです。これが私のフィドルです:( http://jsfiddle.net/CjHAD/10 )

これをクリーンアップして、赤いクリック div を開いて黒いクリック div を開いたときに、青いクリック サムが .parent-box 兄弟内で複製されないようにする必要があります。

これをより優雅で、流動的で、効率的なものにするための一般的なヒントは大歓迎です。必要に応じて喜んで明確にします!

コードは次のとおりです: コードは次のとおりです: HTML:

<div class="parent-box">
    <h3>2013</h3>
    <div class="works-post">
        <div class="x-image" style="color: red">click</div><!--open/close content-->
        <div class="works-thumb">                       
            <img width="150" height="112"  />
        </div><!--.works-thumb-->
        <div class="toggle-content">
            <h4>Content</h4>
        </div><!--.toggle-content-->
    </div><!--.works-post-->
</div><!--.parent-box-->
<div class="parent-box">
    <h3>2012</h3>
    <div class="works-post">
        <div class="x-image" style="color: blue">click</div><!--open/close content-->
        <div class="works-thumb">                       
            <img width="150" height="112"  />
        </div><!--.works-thumb-->
        <div class="toggle-content">
            <h4>Content</h4>
        </div><!--.toggle-content-->
    </div><!--.works-post-->
    <div class="works-post">
        <div class="x-image">click</div><!--open/close content-->
        <div class="works-thumb">                       
           <img width="150" height="112"  />
        </div><!--.works-thumb-->
        <div class="toggle-content">
            <h4>Content</h4>
        </div><!--.toggle-content-->
    </div><!--.works-post-->
</div><!--.parent-box-->

私のCSS：

h3 {
clear: both;
width: 100%;
}
.x-image {
border: solid thin #000;
float: left;
padding: 0 2px 0 0;
position: relative;
z-index: 15;    
}
.works-thumb {
margin: 5px 0 0 10px;
width: 25%;
}
.works-thumb img {
border: solid 2px #a8b9b7;  
}
.works-post {
border: none;
float: left;
padding-bottom: 2em;    
}
.toggle-content {
    display: none;
    margin: 0px 0 0 1.5em;
    padding-bottom: 1em;
    min-height: 150px;
}
.open {
background-color: #eee;
clear: both;
width: 100%;
border-top: solid thin #ccc;
border-bottom: solid thin #ccc;
}

そして私のjQuery：

$(document).ready(function(){

$('.x-image').on('click', (function(event){
    var other = $(this).parent().siblings('.works-post');
    var beyond = $(this).closest('.parent-box').siblings().find('.works-post');

    $(this).closest('.works-post').find('.works-thumb').toggle('fast');
 $(this).closest('.works-post').find('.toggle-content').slideToggle('fast', function(){
            $(this).closest('.works-post').toggleClass('open',$(this).is(':visible'));

                other.removeClass('open').insertAfter($('.open'));

                other.find('.toggle-content').hide();
                other.find('.works-thumb').show();

                beyond.removeClass('open');

                beyond.find('.toggle-content').hide();
                beyond.children('.works-thumb').filter(':hidden').show();

        })

}))

});

ありがとう！

4

1 に答える 1

0

への呼び出しを削除すると、.insertAfter($('.open'))参照している問題が解決するようです。メソッドが呼び出された時点で、クラスには 2 つの要素があるため、2 つの場所にopenの内容を挿入しています。other挿入を実行する意図は何ですか?

other.removeClass('open');

jsfiddle

アップデート：

works-postopen を内のセットの先頭に移動しようとしている場合は、 in reference toparent-boxを使用して移動できます。.insertBefore()other.first()

わかりやすくするために、コードを少し変更しました。の削除と末尾.insertAfter()の の追加以外は、基本的にオリジナルと同じことを行います。.insertBefore()

$(document).ready(function () {
    $('.x-image').on('click', (function (event) {
        var thisPost = $(this).closest('.works-post');
        var thisBox = $(this).closest('.parent-box');
        var otherPosts = thisPost.siblings('.works-post');
        var beyondPosts = thisBox.siblings('.parent-box').find('.works-post');

        thisPost.find('.works-thumb').toggle('fast');
        thisPost.find('.toggle-content').slideToggle('fast', function () {
            thisPost.toggleClass('open', $(this).is(':visible'));

            otherPosts.removeClass('open');
            otherPosts.find('.toggle-content').hide();
            otherPosts.find('.works-thumb').show();

            beyondPosts.removeClass('open');
            beyondPosts.find('.toggle-content').hide();
            beyondPosts.children('.works-thumb').filter(':hidden').show();

            thisPost.insertBefore(otherPosts.first());
        });
    }));
});

jsfiddle

于 2013-02-18T23:32:11.860 に答える