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

我有一个简单的jquery菜单设置...它工作正常，除了父项。我只列出了一个父项，但可能有很多，所以raw #id也不适用于此。我想在CLICKED时应用一个类，但是当用户在其他地方盘旋并且菜单滑动时移除该类。jQuery - 在点击时添加一个类，在Hover上移除它

这是我到目前为止没有为我工作。

<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>

来源

2010-03-09 Ciel

您可以添加一些CSS以便我们看到所需的效果吗？ – 2010-03-09 20:03:18

我真的不知道你想与.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，和鼠标离开功能绑定到父li。

来源

2010-03-09 20:11:59 munch

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

它的工作原理，但有些事情感觉不对了。我不禁想应该有做这一切在一个功能更递归的方式...

<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>

来源

2010-03-09 20:02:52 Ciel

你甚至都不需要动态绑定和取消绑定事件，只是设置一个状态变量：

$(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"); 
      }); 


    });

您可能需要改变它有点取决于当你想在悬停效果和关闭。

来源

2010-03-09 20:30:59

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

回答

相关问题