如何使用 jquery 使元素可选

Question

我想在用户点击列表项时选择它们。但我不想使用可选择的 jQuery ui。请更新我的代码，以便可以像在 Windows 资源管理器中一样选择我网站上的元素（仅 li）。

  <ol id="browse-files">
    <li class="browse-file row">
      <div class="span6 file-name-col">timesNew.zip</div>
      <div class="span2 file-type-col">ZIP file</div>
      <div class="span2 file-size-col">1.08MB</div>
      <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
    <li class="browse-file row">
      <div class="span6 file-name-col">Photos.zip</div>
      <div class="span2 file-type-col">ZIP file</div>
      <div class="span2 file-size-col">30.19MB</div>
      <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
    <li class="browse-file row">
      <div class="span6 file-name-col">Docs.zip</div>
      <div class="span2 file-type-col">ZIP file</div>
      <div class="span2 file-size-col">12.38MB</div>
      <div class="span2 file-uploaded-col">23//6/2013</div>
    </li>
  </ol>

这是css

ol#browse-files {
    margin: 0;
    padding: 0;
    list-style: none;
}
ol#browse-files li {
    line-height: 40px;
    border-bottom: solid 1px #dcdcdc;
}
ol#browse-files li:hover {
    background-color: #dff0d8;
}
ol#browse-files li.active {
    background-color: #468847;
    color: #fff;
}

这里有 jQuery 代码

$(document).ready(function() {
   $('ol#browse-files li').click(function(e) {
      if(e.ctrlKey){                                 //Select multiple files with ctrl
          $(this).toggleClass('active')
      } 

      else if($(this).hasClass('active')){
      $(this).toggleClass('active');
      } 

      else {
      $('ol#browse-files li').removeClass('active');
      $(this).addClass('active');
      }
   });

   $('.container:not(ol li)').click(function(e) {     // It works well without this but i want to deselect when user click anywhere else.
      $('ol#browse-files li').removeClass('active');
  });
});

Answer 1

DEMO HERE

使用e.stopPropagation() 停止将点击事件冒泡到容器；

$('ol#browse-files li').click(function (e) {
        e.stopPropagation();
        if (e.ctrlKey) { //Select multiple files with ctrl
            $(this).toggleClass('active');
        } else if ($(this).hasClass('active')) {
            $(this).toggleClass('active');
        } else {
            $('ol#browse-files li').removeClass('active');
            $(this).addClass('active');
        }
});

$(".container").not("ol li").click(function (e) { 
       $('ol#browse-files li').removeClass('active');
});

现在选择一些li后，当您单击容器（灰色区域）时，将根据需要删除选择