突然切换不起作用，JQuery

Question

上个月我帮助/使用过一个网站项目，但由于菜单的.toggle功能没有按预期工作，因此现在已经停滞不前了。

我制作了完整菜单here

的小提琴

jQuery(document).ready(function() {
jQuery('.menuD').click(function(e) {
    jQuery(this).toggleClass('active');
    jQuery('.mennu').toggleClass('active');

    e.preventDefault();
    });
});

（这是我第一次使用小提琴，所以我希望我以正确的方式输入所有内容，因为我理解它，因为我不必包含“头部”区域。）

我无法弄清楚为什么它不起作用，因为去年我为自己的页面做了类似的解决方案，它的工作和验证完美无缺。 Javascript不是我最强的语言，所以一些有助于找到问题的人会被批评。

Answer 1

你有一个错字：

jQuery('.mennu').toggleClass('active');

必须是

jQuery('.menu').toggleClass('active');

Answer 2

var timeoutMenu = null;
$('.trigger').on("click", function() {
    $('.dropdown').toggleClass('active');
});

$('.trigger').hover(function() {
    clearTimeout(timeoutMenu);
    $('.dropdown').toggleClass('active');
}, function() {
    setTimeout(function() {
      $('.dropdown').removeClass('active');
    }, 500);
});

.menu, .menu ul {
        list-style:none;
        cursor:pointer;
        margin:0;
        padding:0;
    }
    .menu a {
        float:left;
        text-decoration:none;
        color:#000;
    }
    .menu li:hover > a {
        color:#666;
    }
    .menu ul {
        opacity:0;
        visibility:hidden;
        position:absolute;
        top:25px;
        z-index:1;
        background:#666;
    }
    .menu li:hover > ul {
        opacity:1;
        visibility:visible;
    }
    .menu ul a {
        padding:5px;
        display:block;
        text-transform:none;
    }
    .menu ul a:hover {
        background-color:lightgray;
    }
.trigger:hover .dropdown,
.trigger.clicked .dropdown {
   display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul class="menu">
    <li> <a class="trigger">MENU</a>

        <ul class="dropdown">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
    </li>
</ul>