Ajax无法停止传播

Question

I read data using xhttpRequest from xml files to build a nested list. All data goes in <li></li> are dynamic loaded from xml files. the ajax and html structure is like below:

$("#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>

The main menu is categories. The submenu is products in the category.
I want the submenu opens when I click on the main menu, and closes When I click on the main menu again. But what I got is, the submenu closes when I click on a node in the submenu, which should remain open when I do some actions on submenu rather than main menu.

Could any of you correct the bug for me? Thanks.

</div>

Answer 1

The problem is, that the event has already bubbled up before you catch it. Here's my small solution for that.

$("#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>

</div>