Question

我使用xhttpRequest从xml文件中读取数据以构建嵌套列表。 <li></li>中的所有数据都是从xml文件动态加载的。 ajax和html结构如下所示：

$("#category" ).on('click','.toggle',function(e){
    e.stopPropagation();
    if(!$(this).hasClass("opened")){
        $(this).children("i").removeClass("fa-plus-square");
        $(this).children("i").addClass("fa-minus-square");
        $(this).children('.sub').show();
        $(this).addClass("opened");
    }else{
        $(this).children("i").removeClass("fa-minus-square");
        $(this).children("i").addClass("fa-plus-square");
        $(this).children('.sub').hide();
        $(this).removeClass("opened");    
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="category">
  <li class="toggle">
    <i class="fa"></i><a>category here</a>
    <ul class="sub">
      <li>product here</li>
    </ul>
  </li>
</ul>

主菜单是类别。子菜单是该类别中的产品。我想在单击主菜单时打开子菜单，然后关闭当我再次单击主菜单时。但我得到的是，当我点击子菜单中的一个节点时子菜单关闭，当我在子菜单而不是主菜单上执行某些操作时，该子节点应该保持打开状态。

你们中有谁能为我纠正这个错误吗？感谢。

Answer 1

问题是，在你抓住它之前，事件已经冒出来了。这是我的小解决方案。

$("#category").on('click', '.toggle', function(e) {
  e.stopPropagation();
  if (e.target.classList.contains("product")) {
    // do nothing
  } else {
    if (!$(this).hasClass("opened")) {
      $(this).children("i").removeClass("fa-plus-square");
      $(this).children("i").addClass("fa-minus-square");
      $(this).children('.sub').show();
      $(this).addClass("opened");
    } else {
      $(this).children("i").removeClass("fa-minus-square");
      $(this).children("i").addClass("fa-plus-square");
      $(this).children('.sub').hide();
      $(this).removeClass("opened");
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="category">
  <li class="toggle">
    <i class="fa"></i><a>category here</a>
    <ul class="sub">
      <li class="product">product here</li>
    </ul>
  </li>
</ul>

ajax无法阻止传播

1 个答案: