#javascript #html #css
Вопрос:
Я совсем новичок в веб-разработке и пробовал делать аккордеон. Теперь, кажется, все работает, единственная проблема в том, что, если у меня есть контент над аккордеоном, он продолжает прокручиваться до верхней части страницы. Я просто не могу понять, почему это не работает.
let elem = document.getElementsByClassName("panel-heading"); let i; for (i = 0; i lt; elem.length; i ) { elem[i].addEventListener("click", function() { this.classList.toggle("active"); let panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { let active = document.querySelectorAll( ".panel-container .panel-heading.active" ); for (let j = 0; j lt; active.length; j ) { active[j].classList.remove("active"); active[j].nextElementSibling.style.maxHeight = null; } this.classList.toggle("active"); panel.style.maxHeight = panel.scrollHeight "px"; } }); } *, *::before, *::after { box-sizing: border-box; } body { font-family: proxima-nova, sans-serif; line-height: 1.43; } h1 { font-size: 40px; margin-bottom: 15px; font-weight: 700; color: #123274; } .panel-container { max-width: 1140px; width: 100%; margin: 0 auto; } .panel-heading { font-size: 19px; font-weight: 600; text-decoration: none; background-color: #fff; color: #123274; border: 1px solid #123274; border-radius: 4px; cursor: pointer; padding: 12px 15px; display: block; width: 100%; text-align: left; transition: 0.4s; } .active, .panel-heading:hover { background-color: #f8f9fb; } .panel-heading:after { content: "02B"; color: #123274; float: right; margin-left: 5px; } .active:after { content: "2212"; } .panel { font-size: 20px; font-weight: 400; margin-bottom: 10px; background-color: #fff; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .random { height: 60vh; color: blue; background-color: blue; } lt;!DOCTYPE htmlgt; lt;headgt; lt;meta name="viewport" content="width=device-width, initial-scale=1" /gt; lt;bodygt; lt;div class="random"gt;lt;/divgt; lt;div class="panel-container"gt; lt;h1gt;Accordion met iconenlt;/h1gt; lt;a href="#" class="panel-heading"gt;Sectie 1lt;/agt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;a href="#" class="panel-heading"gt;Sectie 2lt;/agt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;a href="#" class="panel-heading"gt;Sectie 3lt;/agt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;/divgt; lt;div class="panel-container"gt; lt;h1gt;Accordion #2 met iconenlt;/h1gt; lt;a href="#" class="panel-heading"gt;Sectie 1lt;/agt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;a href="#" class="panel-heading"gt;Sectie 2lt;/agt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;a href="#" class="panel-heading"gt;Sectie 3lt;/agt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;/divgt; lt;/bodygt; Я надеюсь, что кто-нибудь сможет помочь мне с этим вопросом,
Заранее спасибо 😀
Комментарии:
1. Попробуйте удалить
href="#"их изlt;agt;тегов.
Ответ №1:
lt;agt;lt;/agt; Тег-это в основном ссылка, она должна вести вас по местам, если вы связали ее # , то вы связали ее со своим корнем, который в основном является той же страницей. Вместо этого попробуйте перейти на другой html-тег. Я использовал div приведенный ниже фрагмент, проверьте его для справки.
let elem = document.getElementsByClassName("panel-heading"); let i; for (i = 0; i lt; elem.length; i ) { elem[i].addEventListener("click", function() { this.classList.toggle("active"); let panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { let active = document.querySelectorAll( ".panel-container .panel-heading.active" ); for (let j = 0; j lt; active.length; j ) { active[j].classList.remove("active"); active[j].nextElementSibling.style.maxHeight = null; } this.classList.toggle("active"); panel.style.maxHeight = panel.scrollHeight "px"; } }); } *, *::before, *::after { box-sizing: border-box; } body { font-family: proxima-nova, sans-serif; line-height: 1.43; } h1 { font-size: 40px; margin-bottom: 15px; font-weight: 700; color: #123274; } .panel-container { max-width: 1140px; width: 100%; margin: 0 auto; } .panel-heading { font-size: 19px; font-weight: 600; text-decoration: none; background-color: #fff; color: #123274; border: 1px solid #123274; border-radius: 4px; cursor: pointer; padding: 12px 15px; display: block; width: 100%; text-align: left; transition: 0.4s; } .active, .panel-heading:hover { background-color: #f8f9fb; } .panel-heading:after { content: "02B"; color: #123274; float: right; margin-left: 5px; } .active:after { content: "2212"; } .panel { font-size: 20px; font-weight: 400; margin-bottom: 10px; background-color: #fff; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .random { height: 60vh; color: blue; background-color: blue; } lt;!DOCTYPE htmlgt; lt;headgt; lt;meta name="viewport" content="width=device-width, initial-scale=1" /gt; lt;bodygt; lt;div class="random"gt;lt;/divgt; lt;div class="panel-container"gt; lt;h1gt;Accordion met iconenlt;/h1gt; lt;div class="panel-heading"gt;Sectie 1lt;/divgt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;div class="panel-heading"gt;Sectie 2lt;/divgt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;div class="panel-heading"gt;Sectie 3lt;/divgt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;/divgt; lt;div class="panel-container"gt; lt;h1gt;Accordion #2 met iconenlt;/h1gt; lt;div class="panel-heading"gt;Sectie 1lt;/divgt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;div class="panel-heading"gt;Sectie 2lt;/divgt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;div class="panel-heading"gt;Sectie 3lt;/divgt; lt;div class="panel"gt; lt;pgt; 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. lt;/pgt; lt;/divgt; lt;/divgt; lt;/bodygt; Комментарии:
1. Это, казалось, сработало, большое спасибо за четкое объяснение, вот я просто осматривался в js навсегда, ха-ха.
2. @tomtom500 Если на ваш вопрос был дан правильный ответ, пожалуйста, примите этот ответ, нажав на галочку рядом с ответом.