Как расширить выпадающее меню, используя CSS, Javascript и HTML?

Question

У меня есть раскрывающееся меню на моей странице, когда пользователь щелкает по раскрывающемуся меню, но кнопка должна развернуться и отобразить данные.

вот что я хочу

Вот HTML

<div claa="demo">
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
</div>

в css. Я пытался установить границы на нет, но это решение выглядело очень огорченным, может ли какая-то помощь, что мне нужно сделать, чтобы получить то, что я хочу?

Answer 1

Есть несколько способов сделать это.

• Вы можете установить для него высоту по умолчанию, просто чтобы показать -Punkt 1 как height: 60px и переключаться между высотой: auto в функции щелчка, связанной с классом каретки.

Или

• Вы можете переключаться между отображением и скрытием класса раскрывающегося меню в вышеупомянутой функции щелчка.

Answer 2

$( '.dropdown-toggle' ).on( 'click touchstart', function(){
  $( '.dropdown-menu' ).toggleClass( 'dropdown-menu-open' );
});

.dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.dropdown-menu-open {
  max-height: 200px;
  transition: all 0.3s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div claa="demo">
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
</div>

Используйте jQuery для переключения класса на ул.Установив .dropdown-menu на max-height: 0;переполнение: скрытое;мы скрываем содержание.Затем мы можем применить стили к .dropdown-menu-open, чтобы увеличить максимальную высоту, чтобы показать содержимое.

Answer 3

Добавьте еще один класс в Button для раскрытия / свертывания и наведите курсор на этот класс для управления элементом ul.

, например:

.expand + ul {display: block;}
.collapse + ul {display: none;}