Question

我有这个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>

Answer 1

变化：

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

是

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

Answer 2

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

javascript手风琴菜单

2 个答案: