javascript - 在它影响的内容下定位一个 js 按钮

Question

我有一个按钮，点击它会展开 div 并显示一些内容。我希望它永久位于 div 的底部，就像它现在位于顶部一样，但要位于下方。我很挣扎，因为它会影响事件，所以我不能只在父 div 中移动它。

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

.collapsible {
  border: none;
    width: 60px;
}

.container{max-width:800px;margin-bottom:20px;overflow:hidden;}
.collapsed{max-height:65px;max-width:200px;}

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

<div class="container">
  <div class="content collapsed">
     <button class="collapsible">More</button>
    <div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
  </div> </div></div>

标签： javascriptjquerycss

Answer 1

css方式

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

.collapsible {
  border: none;
    width: 60px;
}
.content{
position:relative;
}
button{
position:absolute;
bottom:0px;
right:0px;
}

.container{max-width:800px;margin-bottom:20px;overflow:hidden;}
.collapsed{max-height:65px;max-width:200px;}

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

<div class="container">
  <div class="content collapsed">
     <button class="collapsible">More</button>
    <div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
  </div> </div></div>

这是你想要的吗？

HTML 阻塞方式

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

.collapsible {
  border: none;
    width: 60px;
}
.content{
position:relative;
}
button{
}

.container div{max-width:800px;margin-bottom:20px;overflow:hidden;}
.collapsed div{max-height:65px;max-width:200px;}

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

<div class="container">
  <div class="content collapsed">     
    <div>Mauris dui mi, faucibus a elit id, bibendum euismod elit. Aenean pharetra laoreet quam in laoreet. Etiam interdum ligula ac gravida laoreet. Sed tempor lacus mauris, ac feugiat felis viverra eget. Donec dignissim, lacus nec congue interdum, nisl arcu pharetra sapien, id porttitor arcu odio non lectus. Aliquam pulvinar urna quis pretium facilisis. Ut elementum rutrum quam. In tincidunt dui non felis convallis, quis dictum ligula dictum. Vestibulum enim lorem, auctor a iaculis at, mattis ut leo. Sed volutpat venenatis finibus. Cras sapien mauris, ultricies vel facilisis in, pharetra sit amet lacus. Curabitur quis faucibus nibh, vestibulum rhoncus magna. Pellentesque faucibus magna sed molestie aliquam. Nullam convallis auctor diam, et rhoncus erat faucibus sit amet. Nulla quis pulvinar augue.
  </div> </div><button class="collapsible">More</button></div>