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

Question

我做了一个非常简单的展开框。结构如下所示

<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，您可以正确看到 slider ，然后单击 box 2，内容可以也能正常显示，然后你点击返回框1，内容就不会显示。我了解 append 所有 .inside 子元素到 '.outside' 内容在 append 移动元素时只能查看一次到.outside，如果我使用clone()，我可以查看内容，但会丢失一个工作 slider 。

所以我的问题是我是否需要先将 .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);

Answer 1

您可以考虑这样的事情吗？或者它与您的期望是否有太大差异。

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