Question

所以我的目标是创建一个带有减量/增量按钮的下拉菜单，如下所示。

这是我当前的代码

<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

如何在下拉菜单中进行增减输入？

1 个答案: