jQuery - 单击时添加类，悬停时删除它

Question

我设置了一个简单的 jquery 菜单...除了父项之外，它工作正常。我只列出了一个父项，但可能有很多，因此原始 #id 也不适用于此。我想在单击时应用一个类，但当用户将鼠标悬停在其他位置并且菜单滑开时删除该类。

这是迄今为止我所拥有的对我不起作用的内容。

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

            $("ul.topnav li a").click(function () {
                $(this).parent().find("ul.subnav").slideDown('fast').show();

                $(this).parent().hover(function () {
                }, function () {
                    $(this).parent().find("ul.subnav").slideUp('slow');
                    $(this).parent().removeClass("subhover");
                });
            }).before(function () {
                $(this).addClass("subhover");
            });
        });

<ul class="topnav">
  <li><a href="#">Item 1</a></li>
  <li class="dropdownmenu">
     <a href="#">Menu Parent</a>
     <ul class="subnav">
        <li>Item</li>
     </ul>
  </li>
</ul>

Answer 1

我不太确定你想用 .before 做什么，但无论哪种方式，它都没有以正确的方式使用。它的目的是在所选元素之前插入元素，据我所知，它不需要函数。

在其他事件的函数中绑定(bind)事件也不是一个好主意，除非您稍后取消绑定(bind)它们。如果用户多次单击，这可能会导致问题。您还可以使用mouseleave方法而不是一个空的悬停函数。

$("ul.topnav li a").click(function () {
   $(this).parent().find("ul.subnav").slideDown('fast').show();
}).parent().mouseleave(function(){
   $(this).find("ul.subnav").slideUp('slow');
   $(this).removeClass("subhover");
});

这会将 click 事件绑定(bind)到 anchor，并将 mouseleave 函数绑定(bind)到父 li。