Question

我正在为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打开时，它首先向上滑动，然后在第二行下滑下来。

我有点坚持这个。我把加载和全部放在一个函数中，因为我将有一个上一个/下一个按钮，它应循环遍历item div并显示它们的内容。

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

感谢任何帮助：）

Answer 1

尝试以下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);
}

Example Fiddle

Answer 2

编辑您的代码以实现您的目标。

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>

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

2 个答案: