javascript - jQuery如何存储append()或clone()的元素

我做了一个非常简单的扩展盒。结构如下

<div class="container">
    <div class="item"> </div>
    <div class="outside"> </div>  <!-- append '.item''s children to '.outside'  -->
    <div class="item"> </div>
    <div class="item"> </div>
</div>

我想实现的是，如果打开一个框，则在单击另一个框时可以立即查看内容。 （无需再次slideUp和slideDown）

我遇到的问题是，如果单击第一个框box 1，则可以正确看到滑块，然后单击box 2，也可以正确显示内容，然后单击回到box 1 ，内容将不会显示。我了解到append所有.inside子元素到'.outside'的内容只能查看一次，因为append将元素移到.outside，如果使用clone()，则可以查看内容，但会丢失工作滑块。

所以我的问题是我是否需要先将.inside子代添加到'.outside'，然后再将所有内容移回原位置？如果有人可以帮忙吗？谢谢！

在线样本http://jsfiddle.net/ny4sx/

这是我的html

<div class="container">
    <div class="item">1
        <div class="inside">
            <ul class="slider">
                <li>
                    <img src="http://lorempixel.com/580/250/nature/1" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/2" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/3" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/4" />
                </li>
            </ul>
        </div>
    </div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

jQuery的

var $outside = $('<div class="outside"></div>');
var $closebutton = $('<div class="close">x</div>');
$outside.append($closebutton);


$('.item').click(function (event) {
    event.preventDefault();
    var $this = $(this);
    $this.toggleClass('active');


    if ($this.hasClass('active')) {
        $('.active').removeClass('active');
        $this.addClass("active");
    }
    if $this.next().hasClass('outside')) {
    console.log('yes');
} else {
    console.log('no');
    $outside.insertAfter(this).css({
        'height': 300
    }).slideDown();

}

$('.close').click(function () {
    $('.outside').remove();
    $('.active').removeClass('active');

});

});

//Slider FROM Here

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds

function slides() {
    return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll
$interval = setInterval(

function () {
    var $i = $slider.find($slide + '.active').index();

    slides().eq($i).removeClass('active');
    slides().eq($i).fadeOut($transition_time);

    if (slides().length == $i + 1) $i = -1; // loop to start

    slides().eq($i + 1).fadeIn($transition_time);
    slides().eq($i + 1).addClass('active');
},
$transition_time + $time_between_slides);

最佳答案

您会考虑这样的事情还是与您的期望有太大不同？

HTML：

<div class="container">
    <div class="item" data-content="1">1</div>
    <div class="item" data-content="2">2</div>
    <div class="item" data-content="3">3</div>
    <div class="outside">
        <div class="close">x</div>
        <div class='content content1'>
            <ul class="slider">
                <li>
                    <img src="http://lorempixel.com/580/250/nature/1" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/2" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/3" />
                </li>
                <li>
                    <img src="http://lorempixel.com/580/250/nature/4" />
                </li>
            </ul>
        </div>
        <div class='content content2'>
            <h1>this is item 2</h1>
        </div>
        <div class='content content3'>
            <h1>this is item 3</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, aliquam, dolorum ipsa perferendis iure quibusdam consequuntur nulla reiciendis velit aut modi reprehenderit. Sit, mollitia, natus odio repellat neque error voluptatem.</p>
        </div>
    </div>
</div>

JS：

$('.item').click(function(event) {
    var $this = $(this);
    var contentNumber = $this.data("content");

    $('.active').removeClass('active');
    $this.addClass("active");

    $('.content').hide();
    $('.content'+contentNumber).show();
    $('.outside').slideDown();
});

$('.close').click(function(){
    $('.outside').slideUp();
    $('.active').removeClass('active');
});

FIDDLE