jQuery - добавить класс по клику, удалить его при наведении

Question

У меня настроено простое меню jquery ... оно отлично работает, за исключением родительского элемента. Я перечислил только один родительский элемент, но их может быть много, поэтому raw #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, но в любом случае, это не правильно используется. Он предназначен для вставки элементов перед выбранным, и, насколько я знаю, не принимает функции.

Также не стоит связывать события внутри функций других событий, если вы не отсоедините их позже. Это может вызвать проблемы, если пользователь нажмет несколько раз. Вы также можете использовать метод 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>