JQuery 切换按钮和手风琴问题

Question

我有一个“菜单”btn，应该滑动打开一个带有“手风琴”菜单的 div。

当我为包含手风琴的 div 添加值 hide() （在 JS 中）或“hidden”（在 CSS 中）时，手风琴将停止正常工作。使用菜单 btn 打开带有手风琴的 div 后，单击手风琴部分时，它不会查看其中的所有内容。

我用手风琴隐藏 div 的原因是它应该关闭，直到您按下菜单 btn。

手风琴代码：

<script type="text/javascript">
    $(function() {
    //  $('.effect').hide();
        $("#moduleMenu1, #moduleMenu2").accordion({collapsible: true, active: false});
    });
</script>

菜单 btn 代码：

<script type="text/javascript">
    $(function() {
    $(".moduleMenuBtn").click(function() {
        var effect = $('slide').val();
        var options = {};
        $(this).parent().next(".effect").toggle(effect,options,500);
        return false;
    });
});
</script>

请注意，菜单 btn 的脚本不会用手风琴“滑动”打开 div，它只是弹出而没有“滑动”动画？

超文本标记语言

<div class="effect">
                    <div id="moduleMenu1">
                        <h3><a href="#">Section1</a></h3>
                        <div>
                          <p>Some Content</p>
                        </div>
                    </div>
                  </div>

Answer 1

你的第一部分是正确的，

$("#moduleMenu1, #moduleMenu2").accordion({
      collapsible: true, active: false
});

如果你运行它，它显示所有部分都允许关闭，并且没有一个部分打开。

问题是您触发了菜单按钮上的单击事件，该事件打开了 #moduleMenu1 open 的内容。

实际上还

$('.effect').hide();

隐藏了整个菜单和内容部分，而不是您想要的。