Question

弹出菜单不能单击一下就可以帮助我吗？

这是图片

请帮我单击一下打开它，并隐藏在身体的任何位置。

这是代码

    $(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

你那里有很多不必要的重复代码。我将所有这些点击功能简化为一个，然后将类“menuItem”添加到每个链接。我编辑了你的小提琴：

http://jsfiddle.net/mckinleymedia/4yd7panj/3/

它也不起作用，因为jsfiddle无法提取这些文件。我添加了常规jQuery并禁用了工具提示，以显示该工具是如何工作的。

以下是代码：

$(document).ready(function () {
    $(".ui-323 ul.ui-nav > li > a.menuItem").click(function (e) {
        e.preventDefault();
        $(this).parents(".ui-323").toggleClass("active");
    });
});

你可以通过使它成为toggleClass来使这更简单......实际上，是的，没有理由不这样做。编辑了答案。

Answer 2

你的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。现在，只需单击一下即可打开菜单项，并在mouseleave上关闭。

下拉菜单无法单击打开？

2 个答案: