Как сделать шаг приращения / уменьшения внутри выпадающего меню?

Question

Итак, моя цель - сделать выпадающее меню с кнопкой уменьшения / увеличения, как показано ниже.

https://imgur.com/A4zleSX

, и это мои текущие коды

<div class="dropdown">
 <button class="btn border-0 dropdown-toggle form-control" type="button"
  id="dropdownMenu2" data-toggle="dropdown" aria-expanded="false"> 
    Dropdown</button>
 <div class="dropdown-menu" style="width: 250px; background-color: #343a40" 
  aria-labelledby="dropdownMenu2">
   <div class="dropdown-item">
     <div class="row text-white">
      <div class="col-md">
       <i class="fa fa-user mr-2"></i>Adult</div>
      <div class="col-md text-center">
       <button class="btn btn-sm btn-success mx-2">+</button>
       <span>1</span>
       <button class="btn btn-sm btn-success mx-2">+</button>
      </div>
     </div>
    </div>
   </div>

ТакМне удалось сделать до этого момента, но у меня есть проблемы, когда кнопка щелкает внутри выпадающего меню, она прокручивается на страницу вверху, и мне также не нравятся изменения цвета фона при наведении на раскрывающийся элемент.пожалуйста, помогите мне сделать это, спасибо

ОБНОВЛЕНИЕ: так что все, что осталось, мешает странице прокручиваться при нажатии кнопки внутри выпадающего меню, может кто-нибудь помочь, пожалуйста?

Answer 1

Во-первых, вам нужно держать выпадающий список, когда пользователь щелкает по нему что-либоJS:

  $('.keep-open').on({
    "shown.bs.dropdown": function() { $(this).attr('closable', false); },
    "click":             function() { },
    "hide.bs.dropdown":  function() { return $(this).attr('closable') == 'true'; }
});

$('.keep-open #dLabel').on({
  "click": function() {
    $(this).parent().attr('closable', true );
  }
})

html:

<div class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="width: 250px; background-color: #343a40" >
     <div style="display: block;text-align:center;margin-bottom:5px;margin-top:5px">
      <div style="display: inline-block;color:white">
       <i class="fa fa-user mr-2" style="margin:15px;"></i>Adult</div>

       <button class="btn btn-sm btn-success mx-2">-</button>
       <span>1</span>
       <button class="btn btn-sm btn-success mx-2">+</button>
       </div>
          <div style="display: block;text-align:center;margin-bottom:5px;">
       <div style="display: inline-block;color:white;">
       <i class="fa fa-user mr-2" style="color:white;margin:15px;"></i>Child</div>

       <button class="btn btn-sm btn-success mx-2">-</button>
       <span>1</span>
       <button class="btn btn-sm btn-success mx-2">+</button>
      </div>
      </div>

plunker: http://plnkr.co/edit/s4nmZVXpLMzZLDSzVd24?p=preview