#javascript #html #css #anchor #expand
#javascript #HTML #css #привязка #Развернуть
Вопрос:
Я создал страницу с расширяемыми / сворачиваемыми разделами, но я не могу понять, как заставить их открываться по ссылке навигации. Расширяемые / сворачиваемые разделы расширяются так, как я хочу, когда на них нажимают, и мои навигационные ссылки приводят меня к нужному разделу, однако я также хотел бы, чтобы навигационные ссылки расширяли соответствующий раздел в дополнение к переходу к этой части страницы. Я немного новичок, поэтому любая помощь будет оценена.
Вот мой HTML, CSS и jQuery:
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
} .collapsible {
background-color: #eee;
font: 15px/30px "raleway-heavy", sans-serif;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 30px;
margin-top: 18px;
left: 3px;
color: #4c4c4c;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #fdc501;
color: #ffffff;
}
.collapsed-content {
padding: 0 18px;
display: none;
overflow: hidden;
margin-bottom:30px;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav-wrap">
<ul id="nav" class="nav">
<li><a class="smoothscroll" href="#link1">Link 1</a></li>
<li><a class="smoothscroll" href="#link2">Link 2</a></li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
<!-- link1 -->
<section id="link1">
<button type="button" class="collapsible">Link 1 Title<span style="color:#e4b101;">.</span></button>
<div class="collapsed-content">
<hr />
<p>Link 1 content.</p>
</div>
</section>
<!-- end link1 -->
<!-- link2 -->
<section id="link2">
<button type="button" class="collapsible">Link 2 Title<span style="color:#e4b101;">.</span></button>
<div class="collapsed-content">
<hr />
<p>Link 2 content.</p>
</div>
</section>
<!-- end link2 -->
<br /><br /><br /><br /><br /><br /> Вот jsfiddle моего кода:
Ответ №1:
Рассмотрите возможность использования атрибутов data-* для ссылок
<li><a class="smoothscroll" href="#link1" data-target="#link1">Link 1</a></li>
<li><a class="smoothscroll" href="#link2" data-target="#link2">Link 2</a></li>
Затем вы можете добавить прослушиватели событий щелчка ко всем ссылкам и когда пользователь нажимает
по ссылке разверните содержимое. Вы можете использовать что-то вроде этого:
const links = document.querySelectorAll('.smoothscroll')
links.forEach(link => {
link.addEventListener('click', () => {
const section = document.querySelector(link.dataset.target)
const content = section.querySelector('.collapsed-content')
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
})
})
Ответ №2:
Поехали! Я добавил элемент data-link к вашим ссылкам, а затем отправил фильтрацию, чтобы получить хорошие элементы.
var coll = document.getElementsByClassName("collapsible");
var navLink = document.getElementsByClassName("smoothscroll");
var i;
for (i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
for (i = 0; i < navLink.length; i ) {
navLink[i].addEventListener("click", function() {
var link = this.dataset.link;
var sectionId = document.getElementById(link);
var divToOpen = sectionId.querySelector(".collapsible");
divToOpen.classList.toggle("active");
var content = divToOpen.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
} .collapsible {
background-color: #eee;
font: 15px/30px "raleway-heavy", sans-serif;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 30px;
margin-top: 18px;
left: 3px;
color: #4c4c4c;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: leftcollapsible
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #fdc501;
color: #ffffff;
}
.collapsed-content {
padding: 0 18px;
display: none;
overflow: hidden;
margin-bottom:30px;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav-wrap">
<ul id="nav" class="nav">
<li><a class="smoothscroll" data-link="link1" href="#link1">Link 1</a></li>
<li><a class="smoothscroll" data-link="link2" href="#link2">Link 2</a></li>
</ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
<!-- link1 -->
<section id="link1">
<button type="button" class="collapsible">Link 1 Title<span style="color:#e4b101;">.</span></button>
<div class="collapsed-content">
<hr />
<p>Link 1 content.</p>
</div>
</section>
<!-- end link1 -->
<!-- link2 -->
<section id="link2">
<button type="button" class="collapsible">Link 2 Title<span style="color:#e4b101;">.</span></button>
<div class="collapsed-content">
<hr />
<p>Link 2 content.</p>
</div>
</section>
<!-- end link2 -->
<br /><br /><br /><br /><br /><br /> Ответ №3:
Одним из вариантов является добавление события onClick к ссылке навигации, которая запускает код для расширения соответствующего раздела.
Ваш текущий прослушиватель событий обрабатывает это относительно «складного» элемента, к которому прикреплен обработчик. Если вы хотите повторно использовать его как для нажатия кнопки, так и для щелчка по ссылке, вам придется переработать его, чтобы принять конкретный collapsible в качестве аргумента.