Блог

Главная - Вопросы по программированию - Панель Accordion не открывается на моей странице javascript, на которой также есть карта, загруженная с помощью d3

Панель Accordion не открывается на моей странице javascript, на которой также есть карта, загруженная с помощью d3

#javascript #accordion

#javascript #аккордеон

Вопрос:

Мои панели accordion не работают. Я в основном использую точный пример из w3 с несколькими стилистическими изменениями, за исключением того, что я разбиваю компоненты на их разные страницы, например, html отображается на моей индексной странице, javascript — на my .js, а css — на .css. Мой аккордеон появится на моей странице, но ни одна из панелей не откроется. Я полагаю, может быть, я неправильно размещаю файл .js. Буду признателен за любую помощь, и вот ссылка на мой полный проект, если вам нужно более подробно ознакомиться с деталями (https://github.com/Sharitau/website/tree/main/Portfolio/GovernanceFinal )

 <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i  ) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

Комментарии:

1. Когда я превращаю ваш код в исполняемый фрагмент (см. Историю редактирования), все работает.

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

3. Убедитесь, что ваш файл .js является последним, который вы импортируете

4. Еще раз спасибо! На самом деле это было решение, я просто что-то пропустил в своем файле .css!

Метки: , ,