0

我想在用户单击列表项时选择它们。但我不想使用可选择的 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');
  });
});
4

1 回答 1

0

在这里演示

用于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当您单击容器（灰色区域）时选择一些后，将根据需要删除选择

于 2013-07-19T06:06:03.693 回答