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

所以我的问题是我是否需要首先将'.outside'个孩子追加到<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>，然后将所有内容移回原来的位置？如果有人可以帮忙吗？谢谢！

在线示例http://jsfiddle.net/ny4sx/

这是我的HTML

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);

的jQuery

{{1}}

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

Answer 2

我在这里玩了一点：

http://jsfiddle.net/ny4sx/37/

我的修改摘要：

    var savedContent = $('.outside .content').children();
    var target = $('.outside').prev().children().first();
    console.dir(target);
    $('.outside .content').remove();
    target.append(savedContent);

不是最干净的（我做了很多试验和错误），但我弄清楚问题是什么。您在保存对它的引用之前删除了内容，因此它没有持久化。不过，我肯定会按照MamaWalkter提出的方式进行。

jQuery如何存储append（）或clone（）的元素

2 个答案: