0

ユーザーがクリックしたときにリスト項目を選択したい。しかし、私は選択可能なjQuery uiを使用したくありません。コードを更新して、Web サイトの要素 (li のみ) を Windows エクスプローラーと同じように選択できるようにしてください。 

  <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 に答える