Question

我想基于下图创建一个可扩展的div。

e，https://jsfiddle.net/z7phyztx/，但未能成功创建类似效果。

＆＃13;

$('.detail').hide()

$('.mydiv li').click(function() {
  var pos = $(this).offset();
  $('.detail').show();
  $('.detail').offset(pos);

});

＆＃13;

非常感谢您的帮助。

Answer 1

我在下面做的例子可能就是你要找的。

现在更新它更顺畅。看看

＆＃13;

var open = false;
$(".mydiv li").click(function() {
  var index = $(".mydiv li").index(this);
var $this = $(this)

  function show_popup(callback) {
    $(".detail").toggle("slow", function() {
      open = open ? false : true;
    });
  };
  if (index % 2 === 0) {
    if (open) {
      setTimeout(function() {
        show_popup($(".detail").insertAfter($(".mydiv li").eq((index + 1))))
      }, 1000);
    } else {
      $(".detail").insertAfter($(".mydiv li").eq((index + 1)))
    }
  } else {
    if (open) {
      setTimeout(function() {
        show_popup($(".detail").insertAfter($(".mydiv li").eq(index)))
      }, 1000);
    } else {
      $(".detail").insertAfter($(".mydiv li").eq(index))
    }
  }
  $(".detail").toggle("slow", function() {
    $(this).text($($this).attr("data-context"))
    open = open ? false : true;
  });
});

＆＃13;

.maindiv {
  max-width: 450px
}

.mydiv {
  width: 100%
}

.mydiv li {
  width: 200px;
  height: 200px;
  display: inline-block;
  list-style: none;
  border: 1px solid #333;
  padding: 5px;
  margin: 5px
}

.detail {
  border: 2px solid red;
  width: 100%;
  height: 200px;
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="maindiv">
  <ul class="mydiv">

    <li data-context="SOME TEXT 1">sdfdsf</li>
    <li data-context="SOME TEXT 2">sdfdsf</li>
    <li data-context="SOME TEXT 3">sdfdsf</li>
    <li data-context="SOME TEXT 4">sdfdsf</li>
    <div class="detail"></div>
  </ul>

</div>

＆＃13;

Answer 2

我认为您不应该使用列表来执行此操作。所以我改变了代码结构以适应并给老'li'一个类名'item'。我还传递了一个数据属性来帮助识别当前选择的项目。

它的工作方式是，如果单击当前所选项目，则详细信息div将隐藏，否则将显示。如果它已经打开但单击了其他项目，它将保持打开状态。

https://jsfiddle.net/z7phyztx/16/

<script>
$(".mydiv .item").click(function() {
    $this = $(this);
    if ($(this).hasClass('active')){
    $('.item').removeClass('active');
    $(".detail").hide("slow", function() {
      // Animation complete.
    });
    return false;
  }
  $('.item').removeClass('active');
  $(this).addClass('active');
  $(".detail").show("slow", function() {
    // Animation complete.
    $(this).attr('data-position', $this.data('position'));
  });
});

</script>

Answer 3

可以通过CSS3和jQuery来完成，但我会使用jQuery进行解释。

<强> HTML：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

<强> JS：

$('.child').on('click', function() {
    $(this).siblings().removeClass('clicked');
    $(this).closest('.parent').find('.new-child').remove();
    if ($(this).closest('.parent').find('.new-child').length == 0) {
      $(this).addClass('clicked');
      $(this).closest('.parent').append('<div class="new-child hide" />');
      $('.new-child').fadeIn();
    }
 });

<强> CSS：

.child {
  width: 200px;
  height: 200px;
  border: 1px solid;
  float: left;
  margin: 10px 20px;
}

.child:hover {
  background: #cfcfcf;
  cursor: pointer;
}

.parent::after,
.new-child::before {
  content: "";
  display: table;
  clear: both;
  clear: both;
}

.new-child {
  clear: both;
  width: 442px;
  height: 200px;
  margin: 10px 20px 0;
  border: 1px solid;
}

.clicked {
  background: #cfcfcf;
}

.hide {
  display: none;
}

Demo

如何使用css或jquery创建此功能

3 个答案: