基本上我有 3 个下拉菜单,我只需要一个处于事件状态,这样当我从中选择某些内容时,其余的也应该变得事件。所以到目前为止我所做的就是添加了禁用类,现在我让第一个类处于事件状态,而其余 3 个类则处于禁用状态。我的问题是 - 当我从第一个下拉列表中选择某些内容时如何使它们处于事件状态
$(document).ready(function () {
$('#Test #firstId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
$('#Test #secondId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
$('#Test #thirdId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
$('#Test #fourthId .dropdown-menu li a').click(function () {
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>')
});
});
这是我的下拉菜单:
<div class="btn-group" id="firstId">
<button class="btn btn-default dropdown-toggle" type="button"
data-toggle="dropdown">
Store
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<div class="btn-group" id="secondId">
<button class="btn btn-default dropdown-toggle disabled" type="button"
data-toggle="dropdown">
Catalog
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<div class="btn-group" id="thirdId">
<button class="btn btn-default dropdown-toggle disabled" type="button"
data-toggle="dropdown">
Categories
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<div class="btn-group" id="fourthId">
<button class="btn btn-default dropdown-toggle disabled" type="button"
data-toggle="dropdown">
Products
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</div>
最佳答案
JQUERY
$('#firstId ul.dropdown-menu li').on('click',function(){
$('.btn.btn-default.dropdown-toggle.disabled').removeClass('disabled');
});
在firstId上选择查找所有禁用的类并删除禁用的类
关于javascript - 简单的 JavaScript/Bootstrap 下拉问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27973041/