單擊菜單時更改btn顏色複選框選項

Question

我嘗試在用戶單擊菜單列表中的某個選項時更改顏色按鈕。這可能嗎？ 對於btn_clear，我希望背景顏色在點擊菜單選項之一時自動立即變爲藍色，並且對於btn_apply，顏色變爲紅色。 因此，例如，對於「產品」類別，用戶單擊「Alpha」，然後按鈕顏色更改立即自動生效。

請參閱我的FIDDLE ... FIDDLE （SA代碼段似乎不想工作...對不起）。

$(".btn_clear").on('click', function (e) { 
 
    e.stopPropagation(); 
 
    $(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false); 
 
}); 
 

 
$('.dropdown-menu').click(function(e) { 
 
    e.stopPropagation(); 
 
}); 
 

 
$("checkbox").on("click", function(e) { 
 
    e.preventDefault(); 
 
    
 
    var i = $("li").index($(this).parent()); 
 
    
 
    if (i === 1) { 
 
    $('btn_clear').css('background', 'blue'); 
 
    } else if (i === 2) { 
 
    $('btn_apply').css('background', 'red'); 
 
    } 
 
    
 
});

.scrollable-menu { 
 
    height: auto; 
 
    max-height: 200px; 
 
    overflow-x: hidden; 
 
} 
 

 
.checkbox :hover { 
 
     background-color:red; 
 
     cursor:pointer; 
 
    } 
 

 
.div_form :hover { 
 
     background-color:green; 
 
     cursor:pointer; 
 
    } 
 

 
.btn_clear { 
 
    float: right; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 29px; 
 
\t text-align: center; 
 
    background-color:grey 
 
    } 
 
    
 
.btn_apply { 
 
    float: left; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 17px; 
 
\t text-align: center; 
 
    background-color:yellow 
 
    } 
 

 

 
.checkbox label, .radio label { 
 
    min-height: 20px; 
 
    padding-left: 30px; 
 
\t padding-right:30px; 
 
    margin-bottom: 0; 
 
    font-weight: 400; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
.div_form { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t bottom: -70px 
 
} 
 

 
.btn { 
 
\t border-radius:0; 
 
\t margin-top:5px 
 
} 
 

 
.dropdown-menu { 
 
\t border-radius:0; 
 
\t border:5px solid blue 
 
} 
 

 
.typeahead { 
 
\t width:90%; 
 
\t margin-left:10px 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/umd/dropdown.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 
 
<div class="btn-toolbar"> 
 
     <!--Default buttons with dropdown menu--> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-primary" type="button">Products</button> 
 
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button> 
 
      <div class="dropdown-menu" style="margin-left: 2em"> 
 
       <div style="position: relative;"> 
 
        <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
         <input class="countries" placeholder="Countries" type="text"> <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Alpha</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Beta 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Gamma</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Delta</label> 
 
       </div> 
 
\t \t \t \t <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Omega</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Koppa 
 
        </label> 
 
       </div> 
 
         <div class="div_form"> 
 
          <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div><!--Success buttons with dropdown menu--> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-primary" type="button">Availability</button> 
 
      <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button> 
 
      <div class="dropdown-menu" style="margin-left: 2em"> 
 
       <div style="position: relative;"> 
 
        <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
         <input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> One</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Two 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Nine</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Eight</label> 
 
       </div> 
 
\t \t \t \t <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Seven</label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label><input value="" type="checkbox"> Fifteen 
 
        </label> 
 
       </div> 
 
         <div class="div_form"> 
 
          <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div><!--Warning buttons with dropdown menu--> 
 
    </div>

Answer 1

是，能夠http://www.bootply.com/rb3Uyw68Zg

但你的代碼有幾個問題，我添加了一些「console.log」，看看發生了什麼

首先你錯過了一個「。」在你的選擇，改變

if (i === 1) { 
    $('btn_clear').css('background', 'blue'); 
} else if (i === 2) { 
    $('btn_apply').css('background', 'red'); 
} 

到

if (i === 1) { 
    $('.btn_clear').css('background', 'blue'); 
} else if (i === 2) { 
    $('.btn_apply').css('background', 'red'); 
} 

也

var i = $("li").index($(this).parent()); 

總是導致-1，所以你永遠不會進入這些如果，你就必須解決這個問題爲你的背景顏色變化進行調用。

這是我的更改後的代碼http://www.bootply.com/rb3Uyw68Zg

編輯

限制每個菜單的點擊操作，您可以使用descendant selector，所以你應該改變：

$(".checkbox").on("click", function(e) { 

到

$(".products .checkbox").on("click", function(e) { 

這意味着，你將只處理點擊到的「產品」的孩子複選框（你也有產品類添加到您的下拉列表）

這裏有一個更新的例子：http://www.bootply.com/QoIe6kIt2e

Answer 2

當選擇一個選項時，此將改變這兩個按鈕中的顏色：

$(".checkbox").on("click", function(e) { 
    $('.btn_clear').css('background-color', 'blue'); 
    $('.btn_apply').css('background-color', 'red'); 
}); 

段：http://www.bootply.com/0CQWCAtU2s