如何創建一個基本的jQuery下拉菜單？

Question

我對jQuery非常陌生，併爲我自己的項目創建一個下拉菜單插件。我有下面這段JavaScript代碼：

(function($){ 
$.fn.dev_dropdown = function(o, callback) { 
    var defaults = { 
     after: function(e) {}, 
     during: function(e) {}, 
     before: function(e) {}, 
     afterEachAnimation: function(e) {} 
    } 
    if(typeof callback == 'function') { 
     defaults.after = callback; 
    } 
    var o = $.extend(defaults, o || {}); 
    return this.each(function() { 
     var ths = $(this), 
      childUL = ths.children("ul"); 

     ths.off('click').on('click', function(e){ 
      if(!ths){ 
       childUL.removeClass('dev_dropdown_open'); 
      } 
      else { 
       childUL.addClass("dev_dropdown_open"); 
      } 
      return false; 
     }); 

     $(document).on('click', function(){ 
      childUL.removeClass('dev_dropdown_open'); 
     }); 
    }); 
} 
})(jQuery); 

這是我的CSS：

.dev_dropdown { 
    position: relative; 
    float: left; 
} 

.dev_dropdown > ul { 
    display: none; 
    position: absolute; 
    top: 100%; 
    right: 0; /* dropdown left or right */ 
    z-index: 1000; 
    min-width: 150px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    background: #fff; 
    border: 1px solid #1976d2; 
} 

.dev_dropdown .dev_dropdown_open { 
    display: block; 
} 

.dev_dropdown .dev_dropdown_open li { 
    width: 100%; 
    display: block; 
} 

.dev_dropdown .dev_dropdown_open li a { 
    display: block; 
    padding: 10px; 
    color: #999; 
    text-decoration: none; 
} 


.dev_dropdown .dev_dropdown_open li a:hover { 
    background: #f4f4f4; 
    color: #000; 
} 

這是我的HTML

<div class="page_content"> 
     <div class="page_content_inner"> 
      <div class="col_3"> 
       <div class="dev_card"> 
        <div class="dev_card_toolbar"> 
         <div class="toolbar_action"> 
          <ul> 
           <li class="dev_dropdown"> 
            <a class="riplink" href="#"><i class="devs devs-more-vert"></i></a> 
            <ul> 
             <li><a href="#">item</a></li> 
             <li><a href="#">item</a></li> 
             <li><a href="#">item</a></li> 
             <li><a href="#">item</a></li> 
            </ul> 
           </li> 
           <li><a class="riplink" href="#"><i class="devs devs-fullscreen"></i></a></li> 
          </ul> 
         </div> 
         Directory 
        </div> 
        <div class="dev_card_content"> 

        </div> 

       </div> 

      </div> 
      <div class="col_9"> 
       <div class="dev_card"> 
        <div class="dev_card_toolbar"> 
         <div class="toolbar_action"> 
          <ul> 
           <li class="dev_dropdown"> 
            <a class="riplink" href="#"><i class="devs devs-more-vert"></i></a> 
            <ul> 
             <li><a href="#">item</a></li> 
             <li><a href="#">item</a></li> 
             <li><a href="#">item</a></li> 
             <li><a href="#">item</a></li> 
            </ul> 
           </li> 
           <li><a class="riplink" href="#"><i class="devs devs-fullscreen"></i></a></li> 
          </ul> 
         </div> 
         Directory 
        </div> 
        <div class="dev_card_content"> 
         sddfggf 
        </div> 

       </div> 
      </div> 
     </div> 
    </div> 

當我點擊另一個下拉菜單既下拉菜單顯示在同一時間。請幫助我。

Answer 1

它看起來像你使用的是同一個類中兩個菜單，我猜它是.dev_dropdown，使用不同類的每個菜單，如果它不是一個原因，你的HTML代碼會有所幫助。
另一種方法是將單擊事件處理函數綁定到每個元素，使用.each回調函數中的元素參數，該函數是對來自集合的當前元素的引用。還可以防止使用'e.stopPropagation'冒泡到父元素的事件

return this.each(function(i, element) { 
     var ths = $(element), 
      childUL = ths.children("ul"); 

     ths.off('click').on('click', function(e){ 
      e.stopPropagation(); 
      if(!ths){ 
       childUL.removeClass('dev_dropdown_open'); 
      } 
      else { 
       childUL.addClass("dev_dropdown_open"); 
      } 
      return false; 
     }); 

     $(document).on('click', function(){ 
      childUL.removeClass('dev_dropdown_open'); 
     }); 
    });