Расположение кнопки js под содержимым, на которое она влияет

Question

Расположение кнопки js под содержимым, на которое она влияет

Более гибкое решение для создания элементов и связывания событий ( source )

// creating a dynamic element (container div)
var $div = $("", {id: 'myid1', class: 'myclass'});

//creating a dynamic button
 var $btn = $("

Примечание. Это создаст экземпляр обработчика события для каждого элемента (может повлиять на производительность при использовании в петлях)

0

javascript jquery css

задан erutuf 28 March 2019 в 01:59

2 ответа

Другие вопросы по тегам:

javascript jquery css

Похожие вопросы:

score 0 · Answer 1

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

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

на

box.classList.toggle('collapsed')

score 0 · Answer 2

поместите кнопку после свертывания содержимого div и дайте переполнению текста div: hidden; не контейнер

$('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>