JavaScript手风琴菜单

javascript accordion menu

本文关键字：菜单 手风琴 JavaScript      更新时间：2023-09-26

我有这个JavaScript代码，可以使手风琴菜单起作用，它工作，有点...当我单击链接时，它确实会按应有的方式下降，但是当我再次单击它时，它会重新上升，然后再次下降，而不是像我想要的那样隐藏。隐藏刚刚打开的元素的唯一方法是单击菜单上的下一个元素，然后第一个元素将关闭，第二个元素将打开。是否可以对其进行修改以使打开、关闭并保持关闭的元素，而不是关闭并立即打开。

法典： 

// JavaScript Document
$(document).ready(function() {
    //ACCORDION BUTTON ACTION   
    $('div.accordionButton').click(function() {
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
    });
    //HIDE THE DIVS ON PAGE LOAD    
    $("div.accordionContent").hide();
});

  <div id="wrapper">
     <div class="accordionButton"><strong>Subject:</strong></div>
    <div class="accordionContent">Text</div>
     <div class="accordionButton"><strong>Subject:</strong></div>
    <div class="accordionContent">Text</div>
     <div class="accordionButton"><strong>Subject:</strong></div>
    <div class="accordionContent">Text</div>        
</div>

更改：

$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');

要成为

$('div.accordionContent').not($(this).next()).slideUp('normal');
$(this).next().slideToggle();

这可能是一个冒泡的事件问题，但没有完整的代码，很难说。您可以尝试在点击侦听器的末尾添加"return false"，以停止冒泡并确保不执行默认行为。

相关文章：