多次点击Bootstrap下拉菜单。

Question

我的下拉菜单有一个问题，当我点击下拉菜单按钮时，它被打开了，但当我再次点击它时，菜单会向下移动，有时它也不能关闭我的下拉这里是我的html代码。

<div class="col-md-4 dropdown"><h2 class="dd_text">Vegetables</h2>
                    <div class="btn-group" id="mydropdown">
                        <button style="font-size:24px" class="btn btn-light btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img align="left" src="vegetables.jpg" class="image_on_dd"></img></button>
                            <div class="dropdown-menu force-scroll" aria-labelledby="dropdownMenuButton">
                                <label class="pure-material-checkbox">
                                <input type="checkbox" name="brinjal" value="brinjal"/><span>Brinjal</span></label>
                                <label class="pure-material-checkbox">
                                <input type="checkbox" name="potato" value="potato"/><span>Potato</span></label>
                                <label class="pure-material-checkbox">
                                <input type="checkbox" name="tomato" value="tomato"/><span>Tomato</span></label>
                                <label class="pure-material-checkbox">
                                <input type="checkbox" name="capsicum" value="capsicum"/><span>Capsicum</span></label>
                                <label class="pure-material-checkbox">
                                <input type="checkbox" name="onion" value="onion"/><span>Onion</span></label>

这是我的css代码。

       .btn{
          margin-left:30px;
          background: white;
          border-color:white;
          width:300px;
          }

        .btn:hover{
          background: white;
          border-color:white;
          /*border-bottom-color: gray;*/
         }

        .dropdown {
                position: relative;
                display: inline-block;
                }
        .dropdown-menu{
            width:100%;
        }

        .force-scroll{
          overflow-y: scroll;
          width:300px;
         }

         .dropdown-menu{
            transform: translate3d(0px, 85px, 0px)!important;
            }

这是我的结果。

所以现在我想让我的下拉菜单在我双击按钮时关闭，而在我点击一次时打开，这可能吗，如果可以的话，有人能帮帮我吗？

Answer 1

你的HTML代码是无效的，而且你的CSS中首先有多个死规则。另外还有一些不好的做法，比如你在实现一个图标作为按钮的时候，不会像使用Bootstrap按钮。

附上的是一个jsfiddle的工作和清理后的代码。点击这里

<div class="col-md-4 dropdown">
<h2 class="dd_text">Vegetables</h2>
<div class="btn-group" id="mydropdown">

<!-- toggle dropdown button -->
<button class="btn btn-light" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <img src="https://cdn4.iconfinder.com/data/icons/miscellaneous-81-solid/128/salad_vegetable_plate_leaf_menu_diet_healthy_editable_food_fresh_fruits_green_-512.png" width="30" height="30" alt="vegetable">
</button>

<!-- dropdown menu -->
<div class="dropdown-menu force-scroll" aria-labelledby="dropdownMenuButton">
  <label class="pure-material-checkbox">
    <input type="checkbox" name="brinjal" value="brinjal" /><span>Brinjal</span>
  </label>
  <label class="pure-material-checkbox">
    <input type="checkbox" name="potato" value="potato" /><span>Potato</span>
  </label>
  <label class="pure-material-checkbox">
    <input type="checkbox" name="tomato" value="tomato" /><span>Tomato</span>
  </label>
  <label class="pure-material-checkbox">
    <input type="checkbox" name="capsicum" value="capsicum" /><span>Capsicum</span>
  </label>
  <label class="pure-material-checkbox">
    <input type="checkbox" name="onion" value="onion" /><span>Onion</span>
  </label>
</div>

在web中使用双击是我不推荐的，因为双击通常是用来选择文本段落的。如果你想以任何一种方式实现它，有一个解决方案 此处.