Question

我有一个按钮，单击可扩展div并显示一些内容。我希望将其永久定位在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>

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>

Answer 2

您可以替换

import numpy as np
from matplotlib import pyplot as plt

x2y = np.poly1d(np.polyfit(X, Y, 3))
new_X = [x / 10 for x in range(250)]
new_Y = [x2y(x) for x in new_X]
plt.plot(new_X, new_Y)
plt.show()

用于

  if ( box.hasClass('collapsed') ){
    box.removeClass('collapsed');
  }else{
    box.addClass('collapsed');
  }

Answer 3

如果我正确理解，您希望按钮位于框/容器正下方，它将切换可见性。您应该仅使用CSS就能做到这一点。像

<div class="container">
  <div class="content collapsed">
    <div class="text">Mauris dui mio</div>
    <button class="collapsible">More</button>
 </div>
</div>

将按钮移至内容下方，并将一个类添加到div

.content {
  display: flex;
  flex-direction: column;
  align-items: start;
}

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

以及其余样式。然后，您可以在按钮上具有单击功能，并使带有.text的div通过某种逻辑更改高度，以检查当前高度。同样，使用绝对位置也可以通过类似

.content {
  position: relative;
}

.collapsible {
  position: absolute;
  left: 0;
  bottom: 100;
}

我相信它的最低价100。要么最低价0，要么最低价

Answer 4

在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;}
.collapsed{max-height:65px;max-width:200px;overflow:hidden;}

<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>

将js按钮置于其影响的内容下

4 个答案: