当点击其他按钮的下拉项目时，Bootstrap按钮下拉子元素的类将被删除

Question

这里是fiddle。

我想要做的是使用Bootstrap的下拉菜单，而不是选择框，并利用列表项而不是选项。正在从选定列表项中检索并放入其相应按钮元素的数据在单击事件（在呈现后显示为蓝色）时被赋予一个“主动选择”类。像这样：

<li><a href="#" class="active-select">New York<a><li> 

点击其他列表项应该只在相应的按钮元素中从其他列表项中删除上述类。但是该类正在从其他按钮下拉组中的选定列表项中移除。像这样：

<li><a href="#" class>New York<a><li> 

任何人都可以请帮忙吗？

Answer 1

的问题时，因为使用的是parents代替parent：

这行代码的问题是：

thisEl.parents('li').siblings().find('a').removeClass('active-select'); // parents targets all li's above `a` and hence siblings afterwards targets other drop-downs. 

而是使用parent这样的：

thisEl.parent('li').siblings().find('a').removeClass('active-select'); 

全部工作代码

\t (function() { 
 
\t \t var search_btn = $('.select-style').find('button.btn-inverse'), 
 
\t \t \t selectOptions = $('.select-style ul.dropdown-menu li').find('a'); 
 

 
\t \t selectOptions.on('click', function (e) { 
 
\t \t \t e.preventDefault(); 
 

 
\t \t \t var thisEl = $(this); 
 
\t \t \t var getTextData = thisEl.text(); 
 

 
\t \t \t thisEl.addClass('active-select'); 
 
      // Use .parent and not .parents 
 
\t \t \t thisEl.parent('li').siblings().find('a').removeClass('active-select'); 
 

 
\t \t \t thisEl.parents('.btn-group').find('button[type=button]').html(getTextData); 
 
\t \t }); 
 
\t })();

ul.homeInputBaropenState { list-style-type: none; width: 500px; } 
 
ul.homeInputBaropenState li { display: inline; } 
 
ul.homeInputBaropenState li a.active-select { color: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<ul class="select-Section homeInputBaropenState"> 
 
       <li class="select-style"> 
 
        <div class="btn-group"> 
 
         <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
        Select City 
 
         </button> 
 

 
         <ul class="dropdown-menu"> 
 
          <li><a href="#">New York</a></li> 
 
          <li><a href="#">San Fransisco</a></li> 
 
          <li><a href="#">Los Angeles</a></li> 
 
          <li><a href="#">Detroit</a></li> 
 
         </ul> 
 
        </div> 
 
       </li> 
 

 
       <li class="select-style"> 
 
        <div class="btn-group"> 
 
         <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
        Select Type 
 
         </button> 
 
        
 
         <ul class="dropdown-menu"> 
 
          <li><a href="#">Men</a></li> 
 
          <li><a href="#">Women</a></li> 
 
          <li><a href="#">Kids</a></li> 
 
         </ul> 
 
        </div> 
 
       </li> 
 

 
       <div class="clearfix"></div> 
 
      </ul>