在分离之前滑动内容，并在点击时重新附加 [英] Sliding content up before detaching it and reattaching on click

问题描述

我正在使用一个插件的短代码在WordPress上，所有的工作，因为它应该，图库列表，当您单击某个项目时，该div的内容将向下滑动。如果您点击相同的项目，内容将向上滑动，但如果您点击不同的项目，内容只是切换在附加的div。

所以，如果你点击同一行，附加的div会保留在它的位置，只有内容改变，但是如果你点击下一行的图像，附加的div只是跳转到那里，显示内容如下：

  var $ content = $（。big_container）; var $ loaded_content = $（。details）; var $ item_selector = $（。item）; if（$ content.length> 0）{$ item_selector.on（'click'，function（e）{e.preventDefault（）; function load_gallery_container（$ container）{var $ insert_after = $ container.parent（' '）; $ loaded_content.detach（）。insertAfter（$ insert_after）; var div_data = $ container.data（'content'）; $ loaded_content.find（'。div_content'）。html（div_data）; if .hasClass（current））{$ container.addClass（current）; $ loaded_content.slideDown（'slow'）。addClass（open）;} else {$（。current）。removeClass current）; $ loaded_content.slideUp（'slow'）。removeClass（open）;} setTimeout（function（）{$（'html，body'）。animate（{scrollTop：$ loaded_content.offset -  300}，500）;}，600）;} var $ this = $（this）; load_gallery_container（$ this）;}）; }  

  .big_container {background：＃141414;显示：block; padding：30px;}。wrappers {width：500px; margin：0 auto; display：block;}。item {width：31％; height：100px;利润率：1％; margin-bottom：30px; text-align：center;背景：#ccc; color：#fff; display：inline-block;}。details {background：#ddd; width：100％; padding：30px; display：none;}  

 < script src = ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =big_container> < div class =wrappers> < div class =itemdata-content =blabla bla bla blaaaa>点击meee！< / div> < div class =itemdata-content =blabla BLALALA bla blaaaa>点击meee！< / div> < div class =itemdata-content =blabla blBLALbla blaaaa>点击meee！< / div> < / div> < div class =wrappers> < div class =itemdata-content =blabla bla bla randomness>点击meee！< / div> < div class =itemdata-content =blabla bla bla>点击meee！< / div> < div class =itemdata-content =blabla bla bla weeee>点击meee！< / div> < / div> < div class =wrappers> < div class =itemdata-content =blabla bla bla blaaaa>点击meee！< / div> < div class =itemdata-content =blabla bla bla ???>点击meee！< / div> < div class =itemdata-content =我完成了blaaaaing>点击meee！< / div> < / div> < div class =details>来自div的内容位于此处：< div class =div_content>< / div> < / div>< / div>  

烦我。我想这样，当你点击第二行的图像，内容div是打开的，它首先向上滑动，然后在第二行下滑动。

我很抱歉这个。我把加载和所有在一个函数，因为我会有一个前/下一个按钮，应该循环通过项目 divs并显示其内容。

我应该尝试添加if子句以检查image / div所在的行吗？

任何帮助： ）

解决方案

尝试以下jQuery，它应该实现你想要的

  var $ content = $（。big_container）; 
 var $ loaded_content = $（。details）; 
 var $ item_selector = $（。item）; 
 
 if（$ content.length> 0）{
 $ item_selector.on（'click'，function（e）{
 e.preventDefault（）; 
 
 var $ this = $（this）; 
 
 load_gallery_container（$ this）; 
}）; 
} 
 
函数load_gallery_container（$ container）{
 if（$ container.hasClass（current））{
 $ loaded_content.slideUp（'slow' function（）{
 $（this）.removeClass（'open'）; 
 $ container.removeClass（current）; 
}）; 
} else {
 
 var $ insert_after = $ container.parent（'。wrappers'），
 $ current = $（'。current'）; 
 $ current.removeClass（'current'）; 
 
 if（$ current.parent（'。wrappers'）。is（$ insert_after））{
 $ loaded_content.find（'。div_content'）。html（$ container.data '内容'））; 
 $ container.addClass（current）; 
} else {
 if（$ loaded_content.hasClass（open））{
 $ loaded_content.slideUp（'slow'，function（）{
 $（this）。 removeClass（'open'）; 
 $ container.removeClass（current）; 
 
 $ loaded_content.detach（）。insertAfter（$ insert_after）; 
 $ loaded_content.find （'.div_content'）。html（$ container.data（'content'））; 
}）; 
} else {
 $ loaded_content.detach（）。insertAfter（$ insert_after）; 
 $ loaded_content.find（'。div_content'）。html（$ container.data（'content'））; 
} 
 
 $ loaded_content.slideDown（'slow'，function（）{
 $ container.addClass（current）; 
 $（this）.addClass （'open'）; 
}）; 
} 
} 
 setTimeout（function（）{
 $（'html，body'）。animate（{
 scrollTop：$ loaded_content.offset（）。 -  300 
}，500）; 
}，600）; 
} 
  

示例小提琴

I'm working on a shortcode for a plugin on wordpress, and all is working as it should, except one thing that's bugging me a bit.

I have a gallery list, and when you click on an item, the content of that div slides down. If you click on the same item, the content slides up, but if you click on a different item, the content just switches inside the appended div. The appended div gets 'glued' to a wrapper container in which the image is placed.

So if you click within the same row, the appended div stays where it is, only the content changes, but if you click on an image from the next row, the appended div just jumps there and displays the content like this:

var $content = $(".big_container");
    var $loaded_content = $(".details");
    var $item_selector = $(".item");

    if ($content.length > 0) {

      $item_selector.on('click', function(e) {
        e.preventDefault();

        function load_gallery_container($container) {

          var $insert_after = $container.parent('.wrappers');

          $loaded_content.detach().insertAfter($insert_after);

          var div_data = $container.data('content');

          $loaded_content.find('.div_content').html(div_data);

          if (!$container.hasClass("current")) {
            $container.addClass("current");
            $loaded_content.slideDown('slow').addClass("open");
          } else {
            $(".current").removeClass("current");
            $loaded_content.slideUp('slow').removeClass("open");
          }

          setTimeout(function() {
            $('html, body').animate({
              scrollTop: $loaded_content.offset().top - 300
            }, 500);
          }, 600);

        }

        var $this = $(this);

        load_gallery_container($this);

      });

    }

.big_container {
  background: #141414;
  display: block;
  padding: 30px;
}
.wrappers {
  width: 500px;
  margin: 0 auto;
  display: block;
}
.item {
  width: 31%;
  height: 100px;
  margin-right: 1%;
  margin-bottom: 30px;
  text-align: center;
  background: #ccc;
  color: #fff;
  display: inline-block;
}
.details {
  background: #ddd;
  width: 100%;
  padding: 30px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="big_container">
  <div class="wrappers">
    <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
    <div class="item" data-content="blabla BLALALA bla blaaaa">Click on meee!</div>
    <div class="item" data-content="blabla blBLALbla blaaaa">Click on meee!</div>
  </div>
  <div class="wrappers">
    <div class="item" data-content="blabla bla bla randomness">Click on meee!</div>
    <div class="item" data-content="blabla bla bla ">Click on meee!</div>
    <div class="item" data-content="blabla bla bla weeee">Click on meee!</div>
  </div>
  <div class="wrappers">
    <div class="item" data-content="blabla bla bla blaaaa">Click on meee!</div>
    <div class="item" data-content="blabla bla bla???">Click on meee!</div>
    <div class="item" data-content="I am done with blaaaaing">Click on meee!</div>
  </div>
  <div class="details">The content from div goes here:
    <div class="div_content"></div>
  </div>
</div>

This jumping is bugging me. I'd like that when you click on a image in a second row, and the content div is open, that it first slides up, and then slides down under the second row.

I'm kinda stuck with this. I put the loading and all in a function, because I'll have a previous/next buttons that should cycle through the item divs and display their content.

Should I just try to add if clause to check in which row the image/div is located?

Any help is appreciated :)

解决方案

Try the following jQuery, it should achieve what you want

var $content = $(".big_container");
var $loaded_content = $(".details");
var $item_selector = $(".item");

if ($content.length > 0) {
    $item_selector.on('click', function (e) {
        e.preventDefault();

        var $this = $(this);

        load_gallery_container($this);
    });
}

function load_gallery_container($container) {
    if ($container.hasClass("current")) {
        $loaded_content.slideUp('slow', function () {
            $(this).removeClass('open');
            $container.removeClass("current");
        });
    } else {

        var $insert_after = $container.parent('.wrappers'),
            $current = $('.current');
            $current.removeClass('current');

        if ($current.parent('.wrappers').is($insert_after)) {
            $loaded_content.find('.div_content').html($container.data('content'));
            $container.addClass("current");
        } else {
            if ($loaded_content.hasClass("open")) {
                $loaded_content.slideUp('slow', function () {
                    $(this).removeClass('open');
                    $container.removeClass("current");

                    $loaded_content.detach().insertAfter($insert_after);
                    $loaded_content.find('.div_content').html($container.data('content'));
                });
            } else {
                $loaded_content.detach().insertAfter($insert_after);
                $loaded_content.find('.div_content').html($container.data('content'));
            }

            $loaded_content.slideDown('slow', function () {
                $container.addClass("current");
                $(this).addClass('open');
            });
        }
    }
    setTimeout(function () {
        $('html, body').animate({
            scrollTop: $loaded_content.offset().top - 300
        }, 500);
    }, 600);
}

Example Fiddle

这篇关于在分离之前滑动内容，并在点击时重新附加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！