如何动态创建下拉菜单

how to dynamically create a dropdown menu?

本文关键字：创建 下拉菜单 动态 何动态      更新时间：2023-09-26

我动态创建菜单没有问题。我的问题是：类子菜单不起作用。我想是因为警报没有出现。

当我对li进行硬编码而不动态创建它们时，子菜单会起作用。

我正在使用.NET

<script type="text/javascript">
        jQuery(document).ready(function () {
            mostrarGrupo01();
            $(".submenu").click(function () {
              alert("hola");
              $(this).children("ul").slideToggle();
            })
        });
function mostrarGrupo01()
    {
       var k = 0;
       var grupo01;
                $.ajax({
                    type: "POST",
                    url: "Mesa.aspx/getGrupo01",
                    data: '{}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        grupo01 = response.d;
                        $('#grupos').empty();
                        $.each(grupo01, function (index, BEGrupo) {
                            //var r = $('<input type="button" value="' + BEAreaCC.DSAREACC + '" id="' + BEAreaCC.CDAREACC + '" name="' + BEAreaCC.CDAREACC + '" style="font-size:xx-large" onclick="botonClick(this.id, this.name, this.title);"/> ');
                            //var t = $('<li class="submenu"><button type="button" name="' + BEGrupo.CDGRUPO01 + '" onclick="mostrarGrupo02(this.name, this.id);">' + BEGrupo.DSGRUPO01 + ' </button> <ul></ul> </li>');
                            //var t = $('<li class="submenu"><button type="button" name="' + BEGrupo.CDGRUPO01 + '">' + BEGrupo.DSGRUPO01 + ' </button> <ul></ul> </li>');
                            var t = $('<li class="submenu"><a href="#">' + BEGrupo.DSGRUPO01 + '</a></li>');
                            $('#grupos').append(t);
                            k++;
                        });
                    },
                    failure: function (msg) {
                        $('#grupos').text(msg);
                    }
                });
            }
</script>

HTML:

<div class="contenedorMenu">
      <nav class="menu">
            <ul id="grupos">
            </ul>
      </nav>
</div>

类为submenu的HTML元素会动态添加到页面中。因此，您需要以以下方式绑定您的事件：

$(".submenu").on('click',function () {
     alert("hola");
     $(this).children("ul").slideToggle();
});

由于$.ajax的异步特性，在将.submenu添加到DOM之前，您正在绑定单击事件。

你有两个选择：

1。将.submenu元素添加到DOM 后，在.ajax成功回调中绑定单击事件

success: function (response) {
    ...
    $.each(grupo01, function (index, BEGrupo) {
        ...
    });
   $(".submenu").click(function () {
       alert("hola");
       $(this).children("ul").slideToggle();
   })
},

2.或者更改您的点击绑定以针对父ul

$("#grupos").on('click', '.submenu', function () {
    alert("hola");
    $(this).children("ul").slideToggle();
})
相关文章：