Размещение кнопки js под контентом, на который она влияет

ProgramBox

Размещение кнопки js под контентом, на который она влияет

Post author:admin
Запись опубликована:6 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #css

Вопрос:

У меня есть кнопка, которая при нажатии расширяет 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>

1. Итак, в чем вопрос? Обратите внимание, что вы можете заменить if() на box.toggleClass('collapsed')

2. Как поместить кнопку под всем этим, чтобы она не была сверху

3. Вы имеете в виду переместить ее с помощью jQuery?

4. я хочу, чтобы она постоянно находилась, по умолчанию, в нижней части контейнера div

5. Что плохого в простом перемещении <button /> под вашим <div /> ?

Ответ №1:

поместите кнопку после того, как содержимое 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>

Ответ №2:

способ 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>

Ответ №3:

Вы можете заменить это

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

для

 box.classList.toggle('collapsed')

Ответ №4:

Если я правильно понимаю, вы хотите, чтобы кнопка располагалась прямо под коробкой / контейнером, для которого она будет переключать видимость. Вы должны быть в состоянии сделать это, используя только 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;
}

плюс остальные ваши стили. Затем вы можете использовать функцию щелчка по кнопке и иметь div с .text изменением высоты с некоторой логикой, чтобы проверить текущую высоту. Также использование абсолютной позиции могло бы сделать это также с чем-то вроде

 .content {
  position: relative;
}

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

Я считаю, что это 100 нижних значений. Либо это, либо нижний 0