removeClass不工作

Question

我有一个printf '[SeatDefaults]\nautologin-user=test\nautologin-user-timeout=0' > /etc/lightdm/lightdm.conf 列表，此列表正在运行li

我想点击data-project-id list_title removeClass＆＃34;打开＆＃34;但没有工作。

提示：e无效。

toggleClass

JS：

<div class="project-side-list scrollbar-inner">
   <ul id="sortable">
      <li data-project-id="1">
         <div class="list-title">Content</div>
           <div class="list-project-detail-content">
           </div>
      </li>
  </ul>
</div>

Answer 1

首先，您的HTML无效，但未关闭<li>标记。

以下是工作示例，如果您想稍后动态加载列表，可以使用委托功能。

      
function openToggler() {
  var _this = $(this);

  var element = _this.closest('li[data-project-id]');
  var elementId = element.attr('data-project-id');

  $('.project-side-list li[data-project-id]').not('[data-project-id="' + elementId + '"]').removeClass('open');

  element.toggleClass('open');
}


$('.list-title').click(openToggler);
//$('.project-side-list').delegate('.list-title', 'click', openToggler);

li {
 color: red;
}

li.open {
  color: blue;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    
<div class="project-side-list scrollbar-inner">
   <ul id="sortable">
      <li data-project-id="1">
         <div class="list-title">Content</div>
           <div class="list-project-detail-content">
           </div>
      </li>
      <li data-project-id="2">
         <div class="list-title">Example</div>
           <div class="list-project-detail-content">
           </div>
      </li>
      <li data-project-id="3">
         <div class="list-title">Example Content</div>
           <div class="list-project-detail-content">
           </div>
      </li>      
  </ul>
</div>

Answer 2

这是一种简单的方法。

app.js

http://codepen.io/iLavs/pen/YZBeMd