bootstrap dropdown可以用来关闭打开某个div吗_百度知道
bootstrap dropdown可以用来关闭打开某个div吗
我有更好的答案
拉菜单是我们会在网站建设项目中经常用到的一种组件，当然，在Bootstrap中也提供了Bootstrap下拉菜单组件，让我们来看看相关的信息吧。如何使用Bootstrap下拉菜单组件Bootstrap下拉菜单组件使用起来非常容易，首先你需要定义一个class=&dropdown&的div，然后在这个div标签中写入触发下拉框的按钮以及对应的下拉菜单，类似代码如下：&div class=&dropdown&&&button class=&btn dropdown-toggle& data-toggle=&dropdown&& 下拉按钮&/button&&ul class=&dropdown-menu& &&li&&a role=&menuitem& tabindex=&-1& href=&#&&下拉菜单1&/a&&/li&&li&&a role=&menuitem& tabindex=&-1& href=&#&&下拉菜单2&/a&&/li&&li&&a role=&menuitem& tabindex=&-1& href=&#&&下拉菜单3&/a&&/li&&/ul&&/div&Bootstrap下拉菜单样式下拉菜单默认是左对齐的，如果你想要让文字右对齐，也非常容易，在ul中加入text-right样式即可：&ul class=&dropdown-menu text-right&& ... &/ul&
采纳率：90%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。bootstrap suggest搜索建议插件使用详解_技术栈
bootstrap suggest搜索建议插件使用详解
脚本之家　·　
技术栈　·　
近日因工作需要看了下此插件。
首先下载bootstrap js包。添加此插件的引用。注意css样式要引用，不能忘记。
前台页面代码，因为楼主做的是选项卡切换查询不同的结果。
&th style="background: #" width="30%"&类型：&/th&
&td width="70%"&
&select class="selectpicker show-tick" id="SlideType"&
&option value="2"&生活&/option&
&option value="1"&首页&/option&
&option value="3"&作品&/option&
&/select&
&/td&
&/tr&
&th style="background:#fff"&标题：&/th&
&div class="input-group" style="width:300px"&
&input type="text" class="form-control" id="Title"&
&div class="input-group-btn"&
&button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"&
&span class="caret"&&/span&
&/button&
&ul class="dropdown-menu dropdown-menu-right" role="menu"&&/ul&
&/div&
&!-- /btn-group --&
&/div&
&/td&
&/tr&　
//搜索建议框
/* $('#Title').keyup(function () {
var obj = $('#SlideType').val();
var txtName = $('#Title').val().trim();
$.post("/Slide/LoadSelect", { Index: obj, Name: txtName }, function (data) {
if (data != null) {
data = JSON.parse(data);
var testdataBsSuggest = $("#Title").bsSuggest({
indexId: 0,
indexKey: 1,
data: {
"value": data
}).on('onSetSelectValue', function (e, data) {
var url = "";
switch (obj) {
case "1": url = "";
case "2": url = "HomeLife/HomeKnowledgeDetails?InfoGuid=";
case "3": url = "";
default:
$("#Url").val(url + data.id);
});*/
这是楼主根据不同的选项请求查询不同的数据，再在结果中搜索
下面说的就是第二种，是搜索插件内部的请求。
如下：
function GetSuggest(obj) {
var testBsSuggest = $("#Title").bsSuggest({
url: "/Slide/LoadSelect?Keyword=" + obj + "",
getDataMethod: "firstByUrl",//获取数据的方式，url：一直从url请求；data：从 options.data 获取；firstByUrl：第一次从Url获取全部数据，之后从options.data获取
effectiveFieldsAlias: { Title: "标题" },
searchFields: ["Title"],
idField: "InfoGuid",
keyField: "Title",
effectiveFields: ["Title"],
showHeader: true,//显示 header
showBtn: true,
//不显示下拉按钮
delayUntilKeyup: false, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
}).on('onSetSelectValue', function (e, keyword) {
var url = "";
switch (obj) {
case "1": url = "";
case "2": url = UrlJump(keyword.id);
case "3": url = "";
$("#Url").val(url + keyword.id.substring(0, keyword.id.length - 1));
对应的后台代码：
最终页面显示的结果。
看看以下配置说明可以更改不同的需求。
####方法调用
禁用提示： $("input#test").bsSuggest("disable");
启用提示： $("input#test").bsSuggest("enable");
销毁插件： $("input#test").bsSuggest("destroy");
查看版本：$("input#test").bsSuggest("version");
####事件监听
onDataRequestSuccess: 当 AJAX 请求数据成功时触发，并传回结果到第二个参数
onSetSelectValue：当从下拉菜单选取值时触发，并传回设置的数据到第二个参数
onUnsetSelectValue：当设置了 idField，且自由输入内容时触发（与背景警告色显示同步）
$("#test")
.on('onDataRequestSuccess', function (event, result) {
console.log(result);
.on('onSetSelectValue', function (e, keyword) {
console.log('onSetSelectValue: ', keyword);
.on('onUnsetSelectValue', function (e) {
console.log('onUnsetSelectValue');
配置参数
参数列表中的值均为插件默认值
var defaultOptions = {
url: null,
//请求数据的 URL 地址
jsonp: null,
//设置此参数名，将开启jsonp功能，否则使用json数据结构
//提示所用的数据，注意格式
indexId: 0,
//每组数据的第几个数据，作为input输入框的 data-id，设为 -1 且 idField 为空则不设置此值
indexKey: 0,
//每组数据的第几个数据，作为input输入框的内容
idField: '',
//每组数据的哪个字段作为 data-id，优先级高于 indexId 设置（推荐）
keyField: '',
//每组数据的哪个字段作为输入框内容，优先级高于 indexKey 设置（推荐）
/* 搜索相关 */
autoSelect: true,
//键盘向上/下方向键时，是否自动选择值
allowNoKeyword: true,
//是否允许无关键字时请求数据
getDataMethod: 'firstByUrl',
//获取数据的方式，url：一直从url请求；data：从 options.data 获取；firstByUrl：第一次从Url获取全部数据，之后从options.data获取
delayUntilKeyup: false,
//获取数据的方式 为 firstByUrl 时，是否延迟到有输入时才请求数据
ignorecase: false,
//前端搜索匹配时，是否忽略大小写
effectiveFields: [],
//有效显示于列表中的字段，非有效字段都会过滤，默认全部。
effectiveFieldsAlias: {},
//有效字段的别名对象，用于 header 的显示
searchFields: [],
//有效搜索字段，从前端搜索过滤数据时使用，但不一定显示在列表中。effectiveFields 配置字段也会用于搜索过滤
twoWayMatch: true,
// 是否双向匹配搜索。为 true 即输入关键字包含或包含于匹配字段均认为匹配成功，为 false 则输入关键字包含于匹配字段认为匹配成功
multiWord: false,
//以分隔符号分割的多关键字支持
separator: ',',
//多关键字支持时的分隔符，默认为半角逗号
/* UI */
autoDropup: false,
//选择菜单是否自动判断向上展开。设为 true，则当下拉菜单高度超过窗体，且向上方向不会被窗体覆盖，则选择菜单向上弹出
autoMinWidth: false,
//是否自动最小宽度，设为 false 则最小宽度不小于输入框宽度
showHeader: false,
//是否显示选择列表的 header。为 true 时，有效字段大于一列则显示表头
showBtn: true,
//是否显示下拉按钮
inputBgColor: '',
//输入框背景色，当与容器背景色不同时，可能需要该项的配置
inputWarnColor: 'rgba(255,0,0,.1)', //输入框内容不是下拉列表选择时的警告色
listStyle: {
'padding-top': 0,
'max-height': '375px',
'max-width': '800px',
'overflow': 'auto',
'width': 'auto',
'transition': '0.3s',
'-webkit-transition': '0.3s',
'-moz-transition': '0.3s',
'-o-transition': '0.3s'
//列表的样式控制
listAlign: 'left',
//提示列表对齐位置，left/right/auto
listHoverStyle: 'background: #07d; color:#fff', //提示框列表鼠标悬浮的样式
listHoverCSS: 'jhover',
//提示框列表鼠标悬浮的样式名称
clearable: false,
// 是否可清除已输入的内容
/* key */
keyLeft: 37,
//向左方向键，不同的操作系统可能会有差别，则自行定义
keyUp: 38,
//向上方向键
keyRight: 39,
//向右方向键
keyDown: 40,
//向下方向键
keyEnter: 13,
//回车键
/* methods */
fnProcessData: processData,
//格式化数据的方法，返回数据格式参考 data 参数
fnGetData: getData,
//获取数据的方法，无特殊需求一般不作设置
fnAdjustAjaxParam: null,
//调整 ajax 请求参数方法，用于更多的请求配置需求。如对请求关键字作进一步处理、修改超时时间等
fnPreprocessKeyword: null
//搜索过滤数据前，对输入关键字作进一步处理方法。注意，应返回字符串
至此结束。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
责任编辑：admin　
二维码分享：
本文标签：
技术栈交流群群号：。技术栈交流群是一个以交流经验为目的，欢迎各位朋友加群。我们会不定期发布一些资源。用户“萌萌呆”对问题“我如何修改ui.bootstrap.dropdown以响应鼠标悬停在下拉按钮上？”的回答 - 问答 - 云+社区 - 腾讯云云+社区首页我想使用ui.bootstrap.dropdown消息框以类似于ui.bootstrap.popover的方式显示文本信息（不是链接）。我想修改这个指令，因为它的功能是我需要的99％，而且我不想添加所有额外的弹窗需要的JS。换句话说，我希望当用户将鼠标悬停在向下箭头上方时显示“下拉列表区域”，然后在将鼠标移离向下箭头时离开。 有没有办法，我可以添加一个选项到ui.bootstrap.dropdown，因此将鼠标悬停在箭头上将显示并隐藏下拉框。我不想在此框中放置任何链接。我希望有人有一些想法可以帮助我提出如何改变ui.bootstrap.dropdown附带的指令：.directive('dropdownToggle', function () {
require: '?^dropdown',
link: function (scope, element, attrs, dropdownCtrl) {
if (!dropdownCtrl) {
dropdownCtrl.toggleElement =
var toggleDropdown = function (event) {
event.preventDefault();
if (!element.hasClass('disabled') && !attrs.disabled) {
scope.$apply(function () {
dropdownCtrl.toggle();
element.bind('click', toggleDropdown);
// WAI-ARIA
element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
scope.$watch(dropdownCtrl.isOpen, function (isOpen) {
element.attr('aria-expanded', !!isOpen);
scope.$on('$destroy', function () {
element.unbind('click', toggleDropdown);
写回答邀请回答天前我如何修改ui.bootstrap.dropdown以响应鼠标悬停在下拉按钮上？写回答@import &https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css&;
.btn-group:hover&.dropdown-menu {
&!doctype html&
&html ng-app=&ui.bootstrap.demo&&
&script src=&//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js&&&/script&
&script src=&//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js&&&/script&
&div ng-controller=&DropdownCtrl&&
&!-- Single button --&
&div class=&btn-group& dropdown is-open=&status.isopen&&
&button type=&button& class=&btn btn-primary dropdown-toggle& dropdown-toggle ng-disabled=&disabled&&
Button dropdown &span class=&caret&&&/span&
&ul class=&dropdown-menu& role=&menu&&
&li&&a href=&#&&Action&/a&
&li&&a href=&#&&Another action&/a&
&li&&a href=&#&&Something else here&/a&
&li class=&divider&&&/li&
&li&&a href=&#&&Separated link&/a&
&!-- Split button --&
&div class=&btn-group& dropdown&
&button type=&button& class=&btn btn-danger&&Action&/button&
&button type=&button& class=&btn btn-danger dropdown-toggle& dropdown-toggle&
&span class=&caret&&&/span&
&span class=&sr-only&&Split button!&/span&
&ul class=&dropdown-menu& role=&menu&&
&li&&a href=&#&&Action&/a&
&li&&a href=&#&&Another action&/a&
&li&&a href=&#&&Something else here&/a&
&li class=&divider&&&/li&
&li&&a href=&#&&Separated link&/a&
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
$scope.status = {
isopen: false
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.
实际上，下拉菜单中的所有操作都是open在单击时向父元素添加一个类。Bootstrap CSS包含一个规则，该规则会导致具有.dropdown-menu类的子元素将其显示属性设置为阻止：.open&.dropdown-menu {
因此，为了在悬停时显示菜单，可以使用CSS中的：hover伪类来执行相同的操作。在这个例子中，我将规则附加到.btn-group父元素，如下所示：.btn-group:hover&.dropdown-menu {
回答过的其他问题文本较短造成的提取不到关键字，你把关键字增加下吧。
try { N(); } catch (MyException) { if (F()) C(); }
try { N(); } catch (MyException) when F() { C(); }
void......
回归operator-&*表示调用过程中的函数，唯一缺少的部分是参数。因此，必须返回一个函式，该函式用给定的参数在给定的对象上调用给定的函数： // PTMF = pointer to member function
template&class Obj&
struct PTM......
此代码已被http://github.com/rnapier/RNCryptor扩展。 RNCryptManager是如何做到这一点的一个很好的例子。它来自iOS5的第11章示例代码：PTL。看着： + (BOOL)decryptFromStream:(NSInputStrea...... 我不会单元测试那些什么都不做的代码，而是调用一个你信任的库。
是的，你必须编写你自己的装饰器来检查验证。 在这个装饰器中，如果用户被认证，你应该调用包装函数。如果不是，你应该返回一个提醒用户登录的默认页面。想玩游戏却不知道这么开机的吃瓜少年。Add a dropdown list to any button. Make sure that the
data-target attribute matches the id in the
&ul> tag. You can add a divider with the
&li class="divider">&/li> tag. You can also add icons. Just add the icon inside the
anchor tag.
&!-- Dropdown Trigger -->
&a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!&/a>
&!-- Dropdown Structure -->
&ul id='dropdown1' class='dropdown-content'>
&li>&a href="#!">one&/a>&/li>
&li>&a href="#!">two&/a>&/li>
&li class="divider" tabindex="-1">&/li>
&li>&a href="#!">three&/a>&/li>
&li>&a href="#!">&i class="material-icons">view_module&/i>four&/a>&/li>
&li>&a href="#!">&i class="material-icons">cloud&/i>five&/a>&/li>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(elems, options);
// Or with jQuery
$('.dropdown-trigger').dropdown();
Description
Defines the edge the menu is aligned to.
autoTrigger
If true, automatically focus dropdown el for keyboard.
constrainWidth
If true, constrainWidth to the size of the dropdown activator.
Provide an element that will be the bounding container of the dropdown.
coverTrigger
If false, the dropdown will show below the trigger.
closeOnClick
If true, close dropdown on item click.
If true, the dropdown will open on hover.
inDuration
The duration of the transition enter in milliseconds.
outDuration
The duration of the transition out in milliseconds.
onOpenStart
Function called when dropdown starts entering.
Function called when dropdown finishes entering.
onCloseStart
Function called when dropdown starts exiting.
onCloseEnd
Function called when dropdown finishes exiting.
Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin
instance like this:
var instance = M.Dropdown.getInstance(elem);
/* jQuery Method Calls
You can still use the old jQuery plugin method calls.
But you won't be able to access instance properties.
$('.dropdown-trigger').dropdown('methodName');
$('.dropdown-trigger').dropdown('methodName', paramName);
Open dropdown.
instance.open();
Close dropdown.
instance.close();
While dropdown is open, you can recalculate its dimensions if its contents have changed.
instance.recalculateDimensions();
Destroy plugin instance and teardown
instance.destroy();
Description
The DOM element the plugin was initialized with.
The options the instance was initialized with.
ID of the dropdown element.
dropdownEl
The DOM element of the dropdown.
If the dropdown is open.
isScrollable
If the dropdown content is scrollable.
focusedIndex
The index of the item focused.