javascript - 单击不打开下拉菜单？

Question

单击一下弹出菜单不起作用任何人都可以帮助我解决这个问题吗？

这是链接 enter link description here

这是图片

请帮助我单击打开它并在正文中的任何地方单击隐藏。

这是代码

    $(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
        }
    });
});

Answer 1

您的 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 .现在，只需单击一下即可打开菜单项，并在鼠标离开时关闭。