在将内容分离并在单击时重新连接之前向上滑动内容

Sliding content up before detaching it and reattaching on click

本文关键字：分离单击重新连接更新时间：2023-09-26

我正在为wordpress上的一个插件编写短代码，一切正常，除了一件事让我有点困扰。

我有一个画廊列表，当你点击一个项目，该div的内容向下滑动。如果你点击同一项，内容向上滑动，但如果你点击不同的项，内容只是在附加的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('.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>

这个跳跃让我很烦。我希望当你点击第二行中的图像时，内容div是打开的，它首先向上滑动，然后向下滑动到第二行下面。

我有点被困住了。我把加载和所有的功能，因为我将有一个previous/next按钮，应该循环通过itemdiv和显示他们的内容。

我是否应该尝试添加if子句来检查图像/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);
    });
}
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);
}

例子小提琴

编辑您的代码以实现您想要的功能。

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) {
         if (!$container.hasClass("current")) {
            $loaded_content.slideUp('slow', function() {
				show_hide_container($container);
             }).removeClass("open");
          }
		  else
		  {
			  show_hide_container($container);
		  } 			  
          setTimeout(function() {
            $('html, body').animate({
              scrollTop: $loaded_content.offset().top - 300
            }, 500);
          }, 600);
        }
		
		function show_hide_container($content_container) {
		  var $insert_after = $content_container.parent('.wrappers');
		  $loaded_content.detach().insertAfter($insert_after);
		  var div_data = $content_container.data('content');
		  $loaded_content.find('.div_content').html(div_data);
		  if (!$content_container.hasClass("current")) {
			$content_container.addClass("current");
			$loaded_content.slideDown('slow').addClass("open");
		  } else {
			$(".current").removeClass("current");
			$loaded_content.slideUp('slow').removeClass("open");
		  }
	  }
        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>