Question

我已经设置了一个简单的jquery菜单...除了父项之外它工作正常。我只列出了一个父项，但可能有很多，所以原来的#id也不适用于此。我想在CLICKED时应用一个类，但是当用户在其他地方徘徊并且菜单滑落时删除该类。

到目前为止，这是我没有用的东西。

    <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做什么，但无论如何，它都没有以正确的方式使用。这意味着在所选元素之前插入元素，据我所知，它不会使用函数。

将事件绑定到其他事件的函数中也不是一个好主意，除非您稍后解除绑定。如果用户多次单击，这可能会导致问题。您也可以使用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事件绑定到anchor，并将mouseleave函数绑定到父li。

Answer 2

您甚至不需要动态绑定和取消绑定事件，只需设置状态变量：

    $(document).ready(function () {
        var doNavigationHoverEffect=false;

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

        $("ul.topnav li").hover(function () {     //I changed this a bit to make more sense
                $(this).addClass("subhover");
            }, function () {
                $(this).find("ul.subnav").slideUp('slow');
                $(this).removeClass("subhover");
            });


    });

您可能需要稍微更改它，具体取决于您希望悬停效果何时开启和关闭。

Answer 3

我想我找到了答案......

它有效，但有些事情感觉不对。我不禁想到应该有一种更加递归的方式在一个函数中完成所有这些......

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

            $('.dropdown a').click(function () {
                $(this).addClass("subhover");
            });

            $("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('fast');
                    $(this).parent().find("a").removeClass("subhover");
                });
            });
        });
</script>

jQuery - 在点击时添加一个类，在Hover上删除它

3 个答案: