我不确定(单击它的)点击问题，但是您不需要JavaScript来禁用" CSS.只需使用< noscript> 标记，就像这样:

i'm not sure the click issue yet (looking at it), but you don't need JavaScript to "disable" the CSS. Simply use <noscript> tags, like so:

<noscript>
    <style type="text/css">
        .exampleclass:hover { display: block; }
    </style>
</noscript>

或者您可以简单地在主菜单元素中添加一个 no-js 类，如果在JavaScript的一开始就启用了JS，则可以删除该类.然后编写您的"no-js css"以使用 .no-js +任意子代而不是主类.

Or you could simply add a no-js class to you main menu element, then remove that class if JS is enabled at the very start of your JavaScript. Then write your "no-js css" to use .no-js + whatever children instead of the main class.

问题很简单，当您使用 mouseover 取消非js" css时，每次用户将鼠标悬停在该子菜单上时，菜单仍处于隐藏状态.换句话说，您不仅要删除"no js" css，还要将其隐藏在 .main-navigation ul li ！

The problem is simple, when you use mouseover to cancel your "non-js" css, the menu is still being hidden everytime the user hovers over that submenu. In other words, you're not just removing the "no js" css, you're hiding it on every mouseover of .main-navigation ul li!

只需遵循我的第一个建议，然后完全删除鼠标悬停功能，然后中提琴！问题解决了！

Simply follow something in my first suggestion, then remove the mouseover function completely and viola! problem solved!

我用您的代码编写了一个jsFiddle，展示了如何实现它.

I wrote a jsFiddle using your code to show how I might approach it.

jsFiddle

$(function() {
    //    See in css where i changed `.main-navigation ul li:hover > ul` to `.main-navigation.no-js ul li:hover > ul`
    //    See Also in HTML where i added class `no-js` to `#site-navigation`
    $(".no-js").removeClass("no-js");
    $('.main-navigation ul li a').on("click", function(e) {
        //    first hide sibling sub-menus!
        $(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
        //    no need for the if statement you had. 
        //    jQuery is "smart", if it doesn't exist, 
        //        then this function simply won't do anything!
        $(this).closest('li').find('ul').slideToggle(100); 
    })
    //    and just to add a little for ya, 
    //        the following will slideUp our submenu if user hovers away from MAIN MENU
    .closest("ul").on("mouseleave", function(e) {
        $(this).find("ul:visible").slideUp("slow");
    });
})

分步

1. 您在< script type ="text/javascript"> 标记之间的手动脚本中，就在您放入 noscript 年龄之前(您可以将其删除)，将所有JS替换为以下内容:

1. Where you have manual script at between <script type="text/javascript"> tags, just before that noscript tage you threw in(which you can remove), replace all your JS with the following:

<script type="text/javascript">
    jQuery(document).ready(function(jQuery) {

        jQuery(".no-js").removeClass("no-js");
        jQuery('.main-navigation ul li a').on("click", function(e) {
            $(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
            jQuery(this).closest('li').find('ul').slideToggle(100); 
        })
        //  If you find the menu hiding to fast, simply remove or comment out the next 3 lines
        jQuery('.main-navigation ul').on("mouseleave", function(e) {
            jQuery(this).find("ul:visible").slideUp("slow");
        });

    });
</script>

/* Find the area that was written as */
.main-navigation ul li:hover > ul {
    display:block;  
}

/* And replace it with the following */
.main-navigation.no-js ul li:hover > ul {
    display:block;  
}

<nav id="site-navigation" class="main-navigation no-js" role="navigation">