弹出式菜单单击不起作用,有人可以帮助我吗?

链接在这里
enter link description here

这是图片

javascript - 下拉菜单无法一键打开?-LMLPHP

请单击一下以帮助我打开它,并隐藏在体内的任何位置。

这是代码

    $(function () {
    $('.ui-323 ul.ui-nav > li').tooltip();
});

$(document).ready(function () {

    $(".ui-323 ul.ui-nav > li > a.ui-bar").click(function (e) {
        /*e.preventDefault();
        if (!($(this).parents(".ui-323").hasClass("active"))) {
            $(this).parents(".ui-323").addClass("active");      //Add Class Active
        }
        else {
            $(this).parents(".ui-323").removeClass("active");       //Remove Class Active
        }*/
    });

    $(".ui-323 ul.ui-nav > li > a.ui-user").click(function (e) {
        e.preventDefault();
        if (!($(this).parents(".ui-323").hasClass("active"))) {
            $(this).parents(".ui-323").addClass("active");      //Add Class Active
        }
        else {
            $(this).parents(".ui-323").removeClass("active");       //Remove Class Active
        }
    });

    $(".ui-323 ul.ui-nav > li > a.ui-doctor").click(function (e) {
        e.preventDefault();
        if (!($(this).parents(".ui-323").hasClass("active"))) {
            $(this).parents(".ui-323").addClass("active");      //Add Class Active
        }
        else {
            $(this).parents(".ui-323").removeClass("active");       //Remove Class Active
        }
    });

    $(".ui-323 ul.ui-nav > li > a.ui-patient").click(function (e) {
        e.preventDefault();
        if (!($(this).parents(".ui-323").hasClass("active"))) {
            $(this).parents(".ui-323").addClass("active");      //Add Class Active
        }
        else {
            $(this).parents(".ui-323").removeClass("active");       //Remove Class Active
        }
    });

    $(".ui-323 ul.ui-nav > li > a.ui-settings").click(function (e) {
        e.preventDefault();
        if (!($(this).parents(".ui-323").hasClass("active"))) {
            $(this).parents(".ui-323").addClass("active");      //Add Class Active
        }
        else {
            $(this).parents(".ui-323").removeClass("active");       //Remove Class Active
        }
    });

    $(".ui-323 ul.ui-nav > li > a.ui-import").click(function (e) {
        e.preventDefault();
        if (!($(this).parents(".ui-323").hasClass("active"))) {
            $(this).parents(".ui-323").addClass("active");      //Add Class Active
        }
        else {
            $(this).parents(".ui-323").removeClass("active");       //Remove Class Active
        }
    });
});

最佳答案

JS中有很多不必要的代码。另外,对外部资源的引用也没有正确放置。这是更新的JS:

$(document).ready(function () {

    $(".ui-323 ul.ui-nav > li > a").click(function (e) {
        e.preventDefault();
        if (!($(this).parents(".ui-323").hasClass("active"))) {
            //$(this).parents(".ui-323").addClass("active");        //Add Class Active
        }
        else {
            $(this).parents(".ui-323").removeClass("active");       //Remove Class Active
        }
    });
});


同样从您的HTML中删除类clearfix,如下所示:

<div class="ui-323 active" style="position: fixed; width: 100%; z-index: 100;">
    <!-- Your code -->
</div>


更新:

添加以下JS代码以关闭mouseleave上的菜单项:

 $(".ui-323 ul.ui-nav > li > a").mouseleave(function (e) {
        e.preventDefault();
        $(this).parents(".ui-323").addClass("active");
 });


我已经更新了JSFiddle。现在,单击即可打开菜单项,然后单击鼠标左键即可关闭。

09-10 07:27
查看更多