使用相同的功能展開復選框選擇列表

Question

我有兩個選擇列表與複選框，我想使用相同的功能來管理它們，以避免代碼重複，但有選擇正確的複選框列表的問題，它不工作的ID：

<div class="multiselect"> 
    <div class="selectBox" id="select1" onclick="showCheckboxes(this.id)"> 
     <select> 
      <option>Select deliverer</option> 
     </select> 
     <div class="overSelect"></div> 
    </div> 
    <div id="deliverer_checkboxes" style="height:100px;overflow:auto;"> 
     <% @deliverers.each do |deliverer| %> 
      <label for="<%= deliverer.id %>"><%= check_box_tag "deliverer_user_ids[]", deliverer.id %> <%= deliverer.name %></label> 
     <% end %> 
    </div> 
    </div> 

    <div class="multiselect"> 
    <div class="selectBox" id="select2" onclick="showCheckboxes(this.id)"> 
     <select> 
      <option>Select shopper</option> 
     </select> 
     <div class="overSelect"></div> 
    </div> 
    <div id="shopper_checkboxes" style="height:100px;overflow:auto;"> 
     <% @shoppers.each do |shopper| %> 
      <label for="<%= shopper.id %>"><%= check_box_tag "shopper_user_ids[]", shopper.id %> <%= shopper.name %></label> 
     <% end %> 
    </div> 
    </div> 
    <%= f.submit 'Search', class: 'btn btn-success' %> 
<% end %> 
</div> 

<script type="text/javascript"> 
var expanded = false; 
    function showCheckboxes(clicked_id) { 
     var checkboxes = document.getElementById(clicked_id); 
     if (!expanded) { 
      checkboxes.style.display = 'block'; 
      expanded = true; 
     } else { 
      checkboxes.style.display = 'none'; 
      expanded = false; 
     } 
    } 
</script> 

<style> 
    .multiselect { 
     width: 200px; 
     float:left; 
    } 
    .selectBox { 
     position: relative; 
    } 
    .selectBox select { 
     width: 100%; 
     font-weight: bold; 
    } 
    .overSelect { 
     position: absolute; 
     left: 0; right: 0; top: 0; bottom: 0; 
    } 
    #deliverer_checkboxes { 
     display: none; 
     border: 1px #dadada solid; 
    } 
    #deliverer_checkboxes label { 
     display: block; 
    } 
    #deliverer_checkboxes label:hover { 
     background-color: #1e90ff; 
    } 
    #shopper_checkboxes { 
     display: none; 
     border: 1px #dadada solid; 
    } 
    #shopper_checkboxes label { 
     display: block; 
    } 
    #shopper_checkboxes label:hover { 
     background-color: #1e90ff; 
    } 
</style> 

Answer 1

而不是共享擴展變量，請直接從您單擊的元素檢查「擴展」標誌。一種方法是檢查顯示，因爲你正在切換它。

function showCheckboxes(clicked_id) { 
    var checkboxes = document.getElementById(clicked_id); 
    var display = checkboxes.style.display; 
    checkboxes.style.display = display !== 'none' ? 'none' : 'block'; 
} 

Answer 2

我不知道你在找什麼做的，但你得到你所看到的行爲的原因是：

1）中的「點擊兩次」 - 您已設置的初始當方框展開時，expanded的值爲false，因此您需要實際點擊兩次以切換隱藏。您可以通過將其初始化設置爲true來糾正該問題

2）類似的問題存在於按照原樣重新使用代碼的情況。對於多個selectBox，您有一個expanded變量。所以無論你選擇哪一個selectBox將存儲在該變量中的值，該值將適用於所有其他selectBox。

可以糾正的東西，如

function showCheckboxes(clicked_id) { 
     var checkboxes = document.getElementById(clicked_id); 

     var expanded = (checkboxes.style.display == 'none') ? false : true; 

     if (!expanded) { 
      checkboxes.style.display = 'block'; 
     } else { 
      checkboxes.style.display = 'none'; 
     } 
    } 

http://jsbin.com/lahulabilo/edit?html,js,output