單擊不打開下拉菜單？

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 。 現在，單擊即可打開菜單項，然后單擊鼠標左鍵即可關閉。