bootstrap 折叠(Collapse)插件只能展开不能折叠
代码是标准的代码,在其他网站运行成功,复制到工程中只能展开,无法折叠,请问是什么问题,试过很多代码了,都是同样的问题。...
代码是标准的代码, 在其他网站运行成功, 复制到工程中只能展开,无法折叠,请问是什么问题, 试过很多代码了, 都是同样的问题。
展开
展开全部
Bootstrap的下拉菜单一直都是需要点击,才会显示出来,可能不太符合大家的使用习惯,可能有的用户都不知道这个可以点击,国外的一个开发者写了一个插件,能将点击事件切换为Hover鼠标悬停事件,这样节约了用户的操作和时间。BootstrapHoverDropdown是一个非官方的Bootstrap插件,使Bootstrap下拉菜单激活悬停和提供更好的用户体验,当前版本支持最新版的Bootstrap3,所以不必担心使用兼容的问题。安装方法可以下载并解压缩下载包从GitHub。或者,可以下载文件通过鲍尔(JavaScript的包管理系统):这也将自动安装Bootstrap和jQuery插件,如果需要。一旦已经下载的文件,在代码文件最后引入Bootstrap的js文件(S)即可:使用方法就像使用Bootstrap一样,可以激活它,没有任何的JavaScript,只要添加一个数据属性,可以让它自动工作。添加data-hover="dropdown"到标签中,如果已经使用Bootstrap,可以替换Bootstrap的data-toggle="dropdown"。可以通过数据属性设置选项,也可以通过data-delay和data-close-others来设置选项。这是一个标准的例子:AccountMyAccountChangeEmailChangePasswordLogout或者,可以通过JavaScript初始化:$('.dropdown-toggle').dropdownHover(options);这没有任何其他配置自启动已经支持此功能菜单也可以。只使用以前使用的标记。只有顶部的标签需要任何特殊标记为我的插件工作。可选参数delay:(可选参数)在毫秒的延迟。这是等待的时间之前关闭下拉当鼠标不再在下拉菜单或按钮/导航项目,激活它。默认值500。instantlyCloseOthers:(可选参数)一个布尔值,如果为真,将立即关闭所有其他下拉菜单的使用当您启动一个新的选择器匹配导航。当你有这么近,可以重叠的很好。默认值true。hoverDelay:(可选参数)开幕前在毫秒的延迟。有些人认为这提高了用户体验,因为它减少了意外的菜单口数量。默认值0。
展开全部
引进插件的先后顺序
或者
//----------------------js
$(function () {
//修复collapse不能正常折叠的问题
$(".myCollapse").click(function () {// .myCollapse 根据实际情况
var itemHref = $(this).attr("href");
var itemClass = $(itemHref).attr("class");
if (itemClass === "panel-collapse collapse") {
$(itemHref).attr("class", "panel-collapse collapse in").css("height", "auto");
} else {
$(itemHref).attr("class", "panel-collapse collapse").css("height", "0px");
}
return false;//停止运行bootstrap自带的函数
});
})
//----------------------html
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne" class="myCollapse">
点击我进行展开,再次点击我进行折叠
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询