2个独立的下拉按钮

Question

我需要使用这些下拉按钮DEMO

来实现两件事

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

2. 当一个下拉列表处于活动状态时，如果第二个下拉列表被点击，则第一个下拉列表 一个人应该自动关闭。

我希望我的问题有道理。

谢谢大家！

Answer 1

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

基本上有两件事：

1. 使用$(this)代替普通$('.clicker')

，仅将点击的元素设置为有效

2. 关闭之前打开的标签，这些标签也在下面评论过。

   $（'。clicker'）。点击（function（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();
   });