Как создать несколько раскрывающихся кнопок

У меня есть очень простой веб-сайт, на котором мы с женой разместили фотографии за последние 19 лет, что мы были вместе. Картинка в месяц. Он загружается с использованием ленивой загрузки, которая отлично работает. Я добавил якорные ссылки (они так называются?), чтобы можно было перескакивать по годам из шапки. Но представьте, что теперь у меня там 19 ссылок. Мой друг сказал мне, что мне следует изучить раскрывающееся меню. Мне удалось найти пример в Интернете, и он работает. Но теперь он дает мне 19 ссылок по вертикали, а не по горизонтали. Поэтому я решил разбить это на несколько подкатегорий.

2020–2024, 2010–2019 и 2005–2009 годы. У меня он «работает» по отдельности, но как только я включаю все три, отображается только последний. Что мне здесь не хватает? У меня очень мало опыта работы с CSS/js/html. Я могу хорошо следовать указаниям, но не знаю, что есть в языке изначально и что должно быть очевидно для более опытного человека.

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

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function doDropdown() {
  /*document.getElementById("myDropdown").classList.toggle("show");*/
  document.getElementById("dropDown2020").classList.toggle("show");
  document.getElementById("dropDown2010").classList.toggle("show");
  document.getElementById("dropDown2000").classList.toggle("show");
}

function showDecade2020() {
  document.getElementById("myDropdown2020").classList.toggle("show");
}

function showDecade2010() {
  document.getElementById("myDropdown2010").classList.toggle("show");
}

function showDecade2000() {
  document.getElementById("myDropdown2000").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/* Dropdown Button */

.dropbtn {
  background-color: white;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
}


/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus {
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<div class = "dropdown">
  <button onclick = "doDropdown()" class = "dropbtn">Jump to a specific year...</button>
  <div id = "dropDown2020" class = "dropdown-content">
    <button onclick = "showDecade2020()" class = "dropbtn">2020-2024</button>
    <div id = "myDropdown2020" class = "dropdown-content">
      <a href = "#2024">2024</a>
      <a href = "#2023">2023</a>
      <a href = "#2022">2022</a>
      <a href = "#2021">2021</a>
      <a href = "#2020">2020</a>
    </div>
  </div>
  <div id = "dropDown2010" class = "dropdown-content">
    <button onclick = "showDecade2010()" class = "dropbtn">2010-2019</button>
    <div id = "myDropdown2010" class = "dropdown-content">
      <a href = "#2019">2019</a>
      <a href = "#2018">2018</a>
      <a href = "#2017">2017</a>
      <a href = "#2016">2016</a>
      <a href = "#2015">2015</a>
      <a href = "#2014">2014</a>
      <a href = "#2013">2013</a>
      <a href = "#2012">2012</a>
      <a href = "#2011">2011</a>
      <a href = "#2010">2010</a>
    </div>
  </div>
  <div id = "dropDown2000" class = "dropdown-content">
    <button onclick = "showDecade2000()" class = "dropbtn">2005-2009</button>
    <div id = "myDropdown2000" class = "dropdown-content">
      <a href = "#2009">2009</a>
      <a href = "#2008">2008</a>
      <a href = "#2007">2007</a>
      <a href = "#2006">2006</a>
      <a href = "#2005">2005</a>
    </div>
  </div>
</div>

javascript html css dropdown

19.05.2024 23:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы проверяли элементы с помощью DevTools? Они находятся друг под другом, так как все расположены absolute.

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function doDropdown() {
  /*document.getElementById("myDropdown").classList.toggle("show");*/
  document.getElementById("dropDown2020").classList.toggle("show");
  document.getElementById("dropDown2010").classList.toggle("show");
  document.getElementById("dropDown2000").classList.toggle("show");
}

function showDecade2020() {
  document.getElementById("myDropdown2020").classList.toggle("show");
}

function showDecade2010() {
  document.getElementById("myDropdown2010").classList.toggle("show");
}

function showDecade2000() {
  document.getElementById("myDropdown2000").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/* Dropdown Button */

.dropbtn {
  background-color: white;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
}


/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus {
  background-color: white;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  /* position: absolute; */
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<div class = "dropdown">
  <button onclick = "doDropdown()" class = "dropbtn">Jump to a specific year...</button>
  <div id = "dropDown2020" class = "dropdown-content">
    <button onclick = "showDecade2020()" class = "dropbtn">2020-2024</button>
    <div id = "myDropdown2020" class = "dropdown-content">
      <a href = "#2024">2024</a>
      <a href = "#2023">2023</a>
      <a href = "#2022">2022</a>
      <a href = "#2021">2021</a>
      <a href = "#2020">2020</a>
    </div>
  </div>
  <div id = "dropDown2010" class = "dropdown-content">
    <button onclick = "showDecade2010()" class = "dropbtn">2010-2019</button>
    <div id = "myDropdown2010" class = "dropdown-content">
      <a href = "#2019">2019</a>
      <a href = "#2018">2018</a>
      <a href = "#2017">2017</a>
      <a href = "#2016">2016</a>
      <a href = "#2015">2015</a>
      <a href = "#2014">2014</a>
      <a href = "#2013">2013</a>
      <a href = "#2012">2012</a>
      <a href = "#2011">2011</a>
      <a href = "#2010">2010</a>
    </div>
  </div>
  <div id = "dropDown2000" class = "dropdown-content">
    <button onclick = "showDecade2000()" class = "dropbtn">2005-2009</button>
    <div id = "myDropdown2000" class = "dropdown-content">
      <a href = "#2009">2009</a>
      <a href = "#2008">2008</a>
      <a href = "#2007">2007</a>
      <a href = "#2006">2006</a>
      <a href = "#2005">2005</a>
    </div>
  </div>
</div>

20.05.2024 00:03

Ответ принят как подходящий

Чтобы кнопка заполняла все пространство, вы можете добавить дополнительные настройки:

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function doDropdown() {
  /*document.getElementById("myDropdown").classList.toggle("show");*/
  document.getElementById("dropDown2020").classList.toggle("show");
  document.getElementById("dropDown2010").classList.toggle("show");
  document.getElementById("dropDown2000").classList.toggle("show");
}

function showDecade2020() {
  document.getElementById("myDropdown2020").classList.toggle("show");
}

function showDecade2010() {
  document.getElementById("myDropdown2010").classList.toggle("show");
}

function showDecade2000() {
  document.getElementById("myDropdown2000").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

 .dropbtn {
    background-color: white;
    color: black;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2);
    width: 100%; /* ADD THIS ################## */
  }

  /* Dropdown button on hover & focus */

  .dropbtn:hover,
  .dropbtn:focus {
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  }

  /* The container <div> - needed to position the dropdown content */

  .dropdown {
    /* REMOVE THIS TWO ###################
    position: relative;
    display: inline-block;
    */

    /* ADD THIS 3 ################## */
    display: flex;
    flex-direction: column;
    width: fit-content;
  }

  /* Dropdown Content (Hidden by Default) */

  .dropdown-content {
    display: none;
    /* position: absolute; REMOVE THIS ########################*/
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }

  /* Links inside the dropdown */

  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }

  /* Change color of dropdown links on hover */

  .dropdown-content a:hover {
    background-color: #ddd;
  }

  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

  .show {
    display: block;
  }

<div class = "dropdown">
  <button onclick = "doDropdown()" class = "dropbtn">Jump to a specific year...</button>
  <div id = "dropDown2020" class = "dropdown-content">
    <button onclick = "showDecade2020()" class = "dropbtn">2020-2024</button>
    <div id = "myDropdown2020" class = "dropdown-content">
      <a href = "#2024">2024</a>
      <a href = "#2023">2023</a>
      <a href = "#2022">2022</a>
      <a href = "#2021">2021</a>
      <a href = "#2020">2020</a>
    </div>
  </div>
  <div id = "dropDown2010" class = "dropdown-content">
    <button onclick = "showDecade2010()" class = "dropbtn">2010-2019</button>
    <div id = "myDropdown2010" class = "dropdown-content">
      <a href = "#2019">2019</a>
      <a href = "#2018">2018</a>
      <a href = "#2017">2017</a>
      <a href = "#2016">2016</a>
      <a href = "#2015">2015</a>
      <a href = "#2014">2014</a>
      <a href = "#2013">2013</a>
      <a href = "#2012">2012</a>
      <a href = "#2011">2011</a>
      <a href = "#2010">2010</a>
    </div>
  </div>
  <div id = "dropDown2000" class = "dropdown-content">
    <button onclick = "showDecade2000()" class = "dropbtn">2005-2009</button>
    <div id = "myDropdown2000" class = "dropdown-content">
      <a href = "#2009">2009</a>
      <a href = "#2008">2008</a>
      <a href = "#2007">2007</a>
      <a href = "#2006">2006</a>
      <a href = "#2005">2005</a>
    </div>
  </div>
</div>

20.05.2024 00:36

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

Как уменьшить размер вывода Rplotly html путем округления значений графика

Фрагмент документа Эммета не добавляет метатег «http-equiv='X-UA-Compatible'». Почему?

Не могу открыть модальное окно через кнопку в php

Как исправить этот эффект прыжка после текстовой анимации?

Всегда ли тег ввода должен находиться прямо под тегом формы? или допустимо ли вложение ввода на нескольких уровнях в теге формы?

Чтение сортировки и извлечение имени файла из списка необработанного текста HMTL

Как получить доступ к iframe.contentWindow.document вложенного iframe внутри изолированного iframe?

Apexcharts показывает ось даты и времени за пределами длины серии

Отображать частичные ползунки/боковые отступы с помощью слайда

Время между нажатием и поднятием ключа неверно

Как создать несколько раскрывающихся кнопок

Ответы 2

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

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