展开div的其余部分以显示完整内容(onClick with buttons)

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (76)

我正在尝试创建一个div,其折叠形式包含一些内容,按下按钮进行扩展,显示其他内容(div的完整形式),并在最后再次提供一个按钮以关闭展开的框。

这就是我所拥有的

var coll = document.getElementsByClassName("collapsible");    for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;

    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}

.collapsible {
  background-color: red;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}


.collapsible:after {
  content: '+';
  color: black;
  float: right;
  margin-left: 5px;
}



.active:after {
  content: "-";
}
.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0s ease-out;
  text-align: left;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 15px;
}

<button class="collapsible">Title 1</button>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>



<button class="collapsible">Title 2 <br>   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</button>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

示例中的第二个div是我试图解释我想要实现的东西,哪个对我来说几乎可以正常工作,即使它在技术上是错误的(因为没有bg颜色所以没有人会看到实际的div结构)但是崩溃按钮最终通过出现在它的中间暴露了混乱。

提问于
用户回答回答于

这是一个使用jQuery的简单示例。

$('button, .smallx').click(function(){
  let box = $(this).closest('.container').find('.content');
  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }
});

*{position:relative;}
.container{max-width:300px;margin-bottom:20px;overflow:hidden;}
.collapsed{max-height:50px;}

.smallx{position:absolute;top:3px;right:3px;padding:3px;border:1px solid dodgerblue;cursor:pointer;z-index:1;}
.smallx:hover{border:1px solid green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
  <button class="collapsible">Title 1</button>
  <div class="content collapsed">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="container">
  <div class="smallx"> X </div>
  <div class="content collapsed">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

所属标签

可能回答问题的人

  • 人生的旅途

    10 粉丝484 提问6 回答
  • 无聊至极

    4 粉丝504 提问6 回答
  • 富有想象力的人

    4 粉丝0 提问4 回答
  • 找虫虫

    2 粉丝0 提问4 回答

扫码关注云+社区

领取腾讯云代金券