0

我正在接近我正在寻找的解决方案，但还有一个问题让我很头疼。这是我的小提琴：（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'))似乎可以解决您引用的问题。在调用该方法时，该类有两个元素，因此您要在两个地方open插入 的内容。other您执行插入的意图是什么？

other.removeClass('open');

jsfiddle

更新：

如果您试图将打开的对象works-post移到其集合的顶部parent-box，您可以使用.insertBefore()in 引用来做到这一点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 回答