當點擊其他按鈕的下拉項目時，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>