菜单标题下方的位置下拉菜单

时间：2016-01-29 15:57:51

标签： javascript jquery css twitter-bootstrap css3

我正在尝试将我的下拉菜单放在我的菜单标题下，如下图所示。充其量我把它放在旁边的位置，但是有可能实现我的目标吗？

enter image description here

这里是我的FIDDLE ...... FIDDLE

请参阅我的FIDDLE / BOOTPLY中的示例，该示例正确显示了我的代码的结果。在SA，它不对，抱歉。

我的代码...... 

$(".btn_clear").on('click', function (e) {
    e.stopPropagation();
    $(this).closest('.dropdown-menu').find('input[type="checkbox"]').prop('checked', false);
});

$('.dropdown-menu').click(function(e) {
    e.stopPropagation();
});

$(".products .checkbox").on("click", function(e) {
  
  var i = $("li").index( $(this).parent() );
  console.log(i);
  
  $('.products .btn_clear').css('background', 'blue');
  $('.products .btn_apply').css('background', 'green');
  
});

$(".availability .checkbox").on("click", function(e) {
  
  var i = $("li").index( $(this).parent() );
  console.log(i);
  
  $('.availability .btn_clear').css('background', 'blue');
  $('.availability .btn_apply').css('background', 'green');
  
});
.scrollable-menu {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

.checkbox :hover {
      background-color:red;
      cursor:pointer;
    }

.div_form :hover {
      background-color:green;
      cursor:pointer;
    }

.btn_clear {
    float: right;
	display: inline-block;
	box-sizing: border-box;
	width: 50%;
	padding: 10px 29px;
	text-align: center;
    background-color:grey
  }
  
.btn_apply {
    float: left;
	display: inline-block;
	box-sizing: border-box;
	width: 50%;
	padding: 10px 17px;
	text-align: center;
    background-color:yellow
    }


.checkbox label, .radio label {
    min-height: 20px;
    padding-left: 30px;
	padding-right:30px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
    width: 100%;
}

.div_form {
	position: absolute;
	bottom: 0;
	bottom: -70px
}

.btn {
	border-radius:0;
	margin-top:5px
}

.dropdown-menu {
	border-radius:0;
	border:5px solid blue;
    position: relative;
    background-color: red;
    border-top-width: 0px;
}

.typeahead {
	width:90%;
	margin-left:10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-toolbar">
        <!--Default buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Products</button>
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu products" style="margin-left: 2em">
                <div style="position: relative;">
                    <div class=" scrollable-menu" style="margin-bottom: 70px;">
                        <input class="countries" placeholder="Countries" type="text"> <div class="checkbox">
                    <label><input value="" type="checkbox"> Alpha</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Beta
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Gamma</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Delta</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Omega</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Koppa
                    </label>
                </div>
                        <div class="div_form">
                            <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--Success buttons with dropdown menu-->
        <div class="btn-group">
            <button class="btn btn-primary" type="button">Availability</button>
            <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
            <div class="dropdown-menu availability" style="margin-left: 2em">
                <div style="position: relative;">
                    <div class=" scrollable-menu" style="margin-bottom: 70px;">
                        <input class="typeahead" placeholder="Search values" type="text"> <div class="checkbox">
                    <label><input value="" type="checkbox"> One</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Two
                    </label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Nine</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Eight</label>
                </div>
				<div class="checkbox">
                    <label><input value="" type="checkbox"> Seven</label>
                </div>
                <div class="checkbox">
                    <label><input value="" type="checkbox"> Fifteen
                    </label>
                </div>
                        <div class="div_form">
                            <span class="btn_apply">Apply</span> <span class="btn_clear">Clear</span>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--Warning buttons with dropdown menu-->
    </div>

1 个答案:

答案 0 :(得分：2)

在这里，我删除了JavaScript并从下拉菜单中移除了左边距和相对位置：http://www.bootply.com/KaP7SiUYVw 

.scrollable-menu {
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
}
.checkbox:hover {
  background-color: red;
  cursor: pointer;
}
.div_form:hover {
  background-color: green;
  cursor: pointer;
}
.btn_clear {
  float: right;
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
  padding: 10px 29px;
  text-align: center;
  background-color: grey
}
.btn_apply {
  float: left;
  display: inline-block;
  box-sizing: border-box;
  width: 50%;
  padding: 10px 17px;
  text-align: center;
  background-color: yellow
}
.checkbox label,
.radio label {
  min-height: 20px;
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 0;
  font-weight: 400;
  cursor: pointer;
  width: 100%;
}
.div_form {
  position: absolute;
  bottom: 0;
  bottom: -70px
}
.btn {
  border-radius: 0;
  margin-top: 5px
}
.dropdown-menu {
  border-radius: 0;
  border: 5px solid blue;
  background-color: red;
  border-top-width: 0px;
}
.typeahead {
  width: 90%;
  margin-left: 10px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="btn-toolbar">
  <!--Default buttons with dropdown menu-->
  <div class="btn-group">
    <button class="btn btn-primary" type="button">Products</button>

    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
    </button>
    <div class="dropdown-menu products">
      <div style="position: relative;">
        <div class=" scrollable-menu" style="margin-bottom: 70px;">
          <input class="countries" placeholder="Countries" type="text">
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Alpha</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Beta
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Gamma</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Delta</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Omega</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Koppa
            </label>
          </div>
          <div class="div_form">
            <span class="btn_apply">Apply</span>  <span class="btn_clear">Clear</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Success buttons with dropdown menu-->
  <div class="btn-group">
    <button class="btn btn-primary" type="button">Availability</button>
    <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span>
    </button>
    <div class="dropdown-menu availability">
      <div style="position: relative;">
        <div class=" scrollable-menu" style="margin-bottom: 70px;">
          <input class="typeahead" placeholder="Search values" type="text">
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">One</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Two
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Nine</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Eight</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Seven</label>
          </div>
          <div class="checkbox">
            <label>
              <input value="" type="checkbox">Fifteen
            </label>
          </div>
          <div class="div_form">
            <span class="btn_apply">Apply</span>  <span class="btn_clear">Clear</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Warning buttons with dropdown menu-->
</div>

相关问题
最新问题