bootstrap 折叠(Collapse)插件只能展开不能折叠

发布网友发布时间：2022-04-26 00:19

共2个回答

热心网友时间：2023-10-23 23:06

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。

热心网友时间：2023-10-23 23:07

引进插件的先后顺序

或者

//----------------------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>