我是JS的新手,但是使用其他Stack帖子,我走到了这一步。 提前感谢!
此引导下拉按钮有效,但所需的结果是下拉按钮根据选择更改颜色,并且下拉按钮每次单击时都会保留"下拉插入符号"。 换句话说,它必须保持为下拉菜单按钮,而不是在单击时成为常规按钮。我不知道如何设置类和/或更改所选每个选项的颜色。
因此,选择开机将导致一个标有"开机"的绿色下拉按钮。 或关机 = 红色等...
https://jsfiddle.net/1buok5mn/
$(function () { <!-- change text in power button -->
$(".dropdown-menu").on('click', 'li a', function () {
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Power On/Off <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Power On</a>
</li>
<li><a href="#">Low Power</a>
</li>
<li class="divider"></li>
<li><a href="#">Power Off</a>
</li>
</ul>
</div>
谢谢!!!
这是
运行良好的演示页面。
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="ddl">
Power On/Off <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" id="1" >Power On</a></li>
<li><a href="#" id="2" >Low Power</a></li>
<li class="divider"></li>
<li><a href="#" id="3" >Power Off</a></li>
</ul>
</div>
这是jquery部分
$('ul li a').click(function(e)
{
var id = $(this).attr('id')
if(id=="1")
{
$('#ddl').removeClass('btn-default');
$('#ddl').removeClass('alert-warning');
$('#ddl').removeClass('alert-danger');
$('#ddl').addClass('alert-success');
$('#ddl').text('Power On');
}
if(id=="2")
{
$('#ddl').removeClass('btn-default');
$('#ddl').removeClass('alert-success');
$('#ddl').removeClass('alert-danger');
$('#ddl').addClass('alert-warning');
$('#ddl').text('Low Power');
}
if(id=="3")
{
$('#ddl').removeClass('btn-default');
$('#ddl').removeClass('alert-success');
$('#ddl').removeClass('alert-warning');
$('#ddl').addClass('alert-danger');
$('#ddl').text('Power Off');
}
});