Question

我正在接近我正在寻找的解决方案，但还有一个让我适合的问题。这是我的小提琴：（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();

        })

}))

});

谢谢！

Answer 1

删除对.insertAfter($('.open'))的调用似乎可以解决您引用的问题。在调用该方法时，有两个元素具有类open，因此您将other的内容插入到两个位置。你执行插入的目的是什么？

other.removeClass('open');

jsfiddle

<强>更新

如果您尝试将已打开的works-post移动到其parent-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

Jquery动态生成内容兄弟问题

1 个答案: