就懸停，而不是點擊

Question

我有下拉菜單3從這裏JS菜單顯示：http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

工作很好的onclick，但我不知道如何使它懸停工作。

我在JS嘗試：

<script type="text/javascript"> 

     function DropDown(el) { 
      this.dd = el; 
      this.placeholder = this.dd.children('span'); 
      this.opts = this.dd.find('ul.dropdown > a'); 
      this.val = ''; 
      this.index = -1; 
      this.initEvents(); 
     } 
     DropDown.prototype = { 
      initEvents : function() { 
       var obj = this; 

       obj.dd.on('hover', function(event){ 
        $(this).toggleClass('active'); 
        return false; 
       }); 

       obj.opts.on('hover',function(){ 
        var opt = $(this); 
        obj.val = opt.text(); 
        obj.index = opt.index(); 
        obj.placeholder.text(obj.val); 
       }); 
      }, 
      getValue : function() { 
       return this.val; 
      }, 
      getIndex : function() { 
       return this.index; 
      } 
     } 

     $(function() { 

      var dd = new DropDown($('#dd')); 

      $(document).hover(function() { 
       // all dropdowns 
       $('.wrapper-dropdown-3').removeClass('active'); 
      }); 

     }); 

    </script> 

Answer 1

我認爲這應該工作：

$(function() { 

     var dd = new DropDown($('#dd')); 

     $('.wrapper-dropdown-3').hover(function() { 
      $(this).toggleClass('active'); 
     }); 

    }); 

如果有任何問題，這麼說。

Answer 2

嘗試：

  obj.dd.on('mouseenter', function(event){ 
       $(this).toggleClass('active'); 
       return false; 
      }); 

      obj.opts.on('mouseleave',function(){ 
       var opt = $(this); 
       obj.val = opt.text(); 
       obj.index = opt.index(); 
       obj.placeholder.text(obj.val); 
      }); 

Answer 3

如果我沒有記錯的話，懸停（）函數查找鼠標懸停和移開鼠標事件。爲什麼只有當鼠標懸停在頂部的某個項目上時，纔會更改菜單？一旦你mouseoff它會改變。我建議只使用mouseover，然後使用mouseleave而不是懸停。