Jquery手风琴防止回发后菜单崩溃

本文关键字：菜单 崩溃 手风琴 Jquery | 更新日期: 2023-09-27 18:01:30

我有一个菜单，它是一个嵌套的ListView控件，在我的主页上。我使用下面的Jquery将这个ListView变成一个手风琴。问题是，当我点击菜单标题，它会导致回发。因此，子菜单闪烁，并且完成后，它重新加载页面和菜单(关闭Active子菜单)。

 $('.head').each(function () {
            var $content = $(this).closest('li').find('.content');
            $(this).click(function (e) {
               // e.preventDefault();
                $content.not(':animated').slideToggle();
            });
        });

Jquery手风琴防止回发后菜单崩溃

简单地说，有几种方法可以在回发期间保持状态。两个最简单的是使用POST和GET，即ViewState或某种查询字符串。

我个人建议使用隐藏字段，假设你想让第三个项目在加载时打开，那么你可以使用像

这样的内容
<input id="hidMenuItem" type="hidden" value="3" />
然后使用jQuery 
$(document).ready(function {
  var itemIndex = $("#hidMenuItem").val();
  $("li .content:nth-child(" + itemIndex + ")").slideToggle();
});

要在回发之前保存打开的项目，请在click事件

中执行此操作
var itemIndex = $("li .content").index(this);
$("#hidMenuItem").val(itemIndex);

这是未经测试的，但这是一个想法。希望对大家有所帮助

相关文章：