使用相同的功能展开复选框选择列表

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