javascript - 2个独立的下拉按钮

Question

我需要用这些下拉按钮实现两件事 DEMO

1. 他们需要独立工作 其他。所以基本上我想要实现的是当你点击 在第一个按钮上，第二个按钮不受影响，并且 反之亦然。在我的示例中，当您单击一个按钮时，另一个按钮 得到那个边界，那不应该发生，它应该是 完全独立。

2. 如果第一个单击第二个下拉菜单，则当一个下拉菜单处于事件状态时 一个应该自动关闭。

我希望我的问题是有道理的。

谢谢大家!

Answer 1

有工作伙伴:http://fiddle.jshell.net/2Yp5r/4

基本上有两件事:

1. 通过使用 $(this) 而不是一般的 $('.clicker')

   仅将点击的元素设置为事件元素

2. 关闭之前打开的标签页，下面也有注释。

   $('.clicker').click(函数(e) {

        //remove previously active style
   $(".clicker").removeClass('active');
   
   //check if this tab is not opened
   if( $('+ ul', $(this)).css('display') == 'none')
   {
       //hide previous opened tab
       $('.dropdown').not(this).hide();
   
       //add style to clicked element
       $(this).addClass('active');   
   }
   
       $('+ ul', $(this)).slideToggle(200);
   
       if($(e.target).attr('href') == '#') {e.preventDefault();}
   
       e.stopPropagation();
       e.stopPropagation();
   });