大佬教程收集整理的这篇文章主要介绍了jquery – 自定义使用引导按钮和下拉元素选择标记行为，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
$('.btn-group').on('focus','.dropdown-menu li a',function() {
$(this).parents('.dropdown-menu').find('li').removeClass('active');
$(this).parent('li').addClass('active');
//Displays SELEcted text on dropdown-toggle button
$(this).closest(":has(button)").find('button').html('<div class="dropDownSELEcted">' + $(this).html() + '</div>' + '<span class="caret" style="float:right;"></span>');
});
.btn-group,.dropdown-menu { max-width: 150px; } .dropdown-menu li a { white-space: normal!important; ; } .dropDownSELEcted { white-space: normal; margin-right: 22px !important; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link which is of two lines or more</a> </li> </ul> </div> <div>
我们使用Bootstrap的button-dropdown组件来创建类似于体验的SELECT TAG.用户可以单击下拉列表并选择任意选项,并在按钮内立即显示相同的值(可通过鼠标和键盘访问)
第1步：单击下拉列表中的单行选项值.
第2步：现在点击下拉列表中的一些多行选项值.
第3步：现在再次单击下拉列表中的某个单行选项值.
问题：在第3步之后,下拉列表(即ul)不会消失.
预期结果：在步骤3之后,下拉列表(即ul)应在每个选项上消失(鼠标单击和键盘使用时).
请忽略插入符号并设计相关的小错误
替换此行：
$(this).parents('.dropdown-menu').find('li').removeClass('active');
有了这个：
$(this).parents('.dropdown-menu').parent().removeClass('open').end().find('li').removeClass('active');
这将是结束代码：
$('.btn-group').on('focus','.dropdown-menu li',function() {
$(this).siblings('.active').removeClass('active').end().addClass('active');
//Displays SELEcted text on dropdown-toggle button
$(this).closest(":has(button)").find('button').html('<div class="dropDownSELEcted">' + $(this).children('a').html() + '</div>' + '<span class="caret" style="float:right;"></span>');
}).on('click mouseup',function() {
$(this).parents('.dropdown-menu').parent().removeClass('open');
});
.btn-group,.dropdown-menu { max-width: 150px; } .dropdown-menu li a { white-space: normal!important; ; } .dropDownSELEcted { white-space: normal; margin-right: 22px !important; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link which is of two lines or more</a> </li> </ul> </div> <div>
以上是大佬教程为你收集整理的jquery – 自定义使用引导按钮和下拉元素选择标记行为全部内容，希望文章能够帮你解决jquery – 自定义使用引导按钮和下拉元素选择标记行为所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。