Как создать основное раскрывающееся меню 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 callback, который ссылается на текущий элемент из коллекции. А также предотвратить событие от барботажа к родительским элементам с использованием «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'); 
     }); 
    });