html - 如何在下拉列表中进行递增/递减输入？

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>

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