Prevent the dropdown from closing when clicking

Question

I have a dropdown inside another dropdown, but when I click on the second one, instead of unfolding everything closes. How can I stop this from happening?

I tried removing data-toggle="dropdown" but is not correct.

My code,

  <div class="dropdown">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Prueba
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <!-- ********** -->
      <div class="dropright">
        <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Sub-Prueba
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <ul class="dropdown-item" id="NodeFilters">
            <li><input type='checkbox'> check1</li>
            <li><input type='checkbox'> check2</li>
          </ul>
        </div>
      </div>
      <!---->
    </div>
  </div>

I'm not sure what I have to do, can somebody help me? Thank you very much!

Answer 1

Add this code:

$(document).ready(function(){
  $('.dropdown-toggle').on("click", function(e) {
    $(this).next('div').toggle();
    e.stopPropagation();
  });
});

It will override the toggle and e.stopPropagation() will prevent the previous level from closing.