Предотвращение закрытия выпадающего меню при нажатии

Question

У меня есть выпадающий внутри другого выпадающего, но когда я нажимаю на второй, вместо того, чтобы развернуть все закрывается. Как я могу предотвратить это?

Я пытался удалить data-toggle="dropdown", но это неверно.

Мой код,

  <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>

Я не уверен, что я кто-нибудь может мне помочь? Большое спасибо!

Answer 1

Добавьте этот код:

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

Это отменит переключение, а e.stopPropagation() предотвратит закрытие предыдущего уровня.