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上移除它

回答

相關問題