jquery - Bootstrap Accordion 错误 : collapse switch back to visible mode-6ren

jquery - Bootstrap Accordion 错误 : collapse switch back to visible mode

转载作者：行者123 更新时间：2023-11-28 09:22:48

24

4

您可以测试这个非常简单的折叠 Bootstrap :

http://www.getshoutbox.com/test.php

如果您尝试向后折叠面板，它会再次显示:这是最简单的折叠示例:

<!DOCTYPE HTML>
<html>
<head>
<title>GAQ getSHoutBox</title>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
</head>
<body>


<div class="panel-group" id="accordion">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#first">First</a>
            </div>
        </div><!--Here heading has to close and collapse has to start-->
        <div class="panel-collapse collapse" id="first">
            <div class="panel-body">
                <img src="images/lebowski-1.jpg" alt="1" />
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#secound" data-toggle="collapse" data-parent="#accordion">
                    Secound</a>
            </div>
        </div>
        <div class="panel-collapse collapse" id="secound">
            <div class="panel-body">
                <img src="images/lebowski-2.jpg" alt="2" />
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#third" data-toggle="collapse" data-parent="#accordion">Third</a>
            </div>
        </div>
        <div class="panel-collapse collapse" id="third">
            <div class="panel-body">
                <img src="images/lebowski-3.jpg" alt="3" />
            </div>
        </div>
    </div>
</div> 
</body>
</html>

怎么了？？？

最佳答案

试试这个

<!DOCTYPE HTML>
<html>
<head>
<title>GAQ getSHoutBox</title>

<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

</head>
<body>

<div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                            Collapsible Accordion 1
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                             <img src="images/lebowski-1.jpg" alt="1" />
                        </div>
                    </div>
                </div>


                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                                Collapsible Accordion 2
                            </a>
                        </h4>
                    </div>
                    <div id="collapseFour" class="panel-collapse collapse">
                        <div class="panel-body">
                             <img src="images/lebowski-2.jpg" alt="2" />
                        </div>
                    </div>
                </div>


                <div class="panel panel-warning">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                                Collapsible Accordion 3
                            </a>
                        </h4>
                    </div>
                    <div id="collapseFour" class="panel-collapse collapse">
                        <div class="panel-body">
                             <img src="images/lebowski-3.jpg" alt="3" />
                        </div>
                    </div>
                </div>

        </div>  
</body>
</html>

关于jquery - Bootstrap Accordion 错误 : collapse switch back to visible mode，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26020006/

24

4

0

文章推荐： css - 如何修复 Joomla 网站文本迷失方向/位移？

文章推荐： css - 自举网格不均匀列

c++ - QT造物主: Program crashes in debug mode but working in Release mode and in DEBUG Mode with breakpoints for QThread based program
我正在开发基于桌面 (Windows 7) 的应用程序，并使用 Qt Creator v 5.6.0 开发程序。我有一个非常奇怪的问题，即我的程序在 DEBUG 模式下崩溃，但在 RELEASE 模
org-mode - org-mode 表内的代码块
我爱org-tables ，我用它们来记录各种事情。我现在正在为 Nix 记录一些单行代码(在阅读了 Domen Kožar 的 excellent guide 后，在 this year's Eur
org-mode - 在 org-mode 的编号列表中的步骤之间移动
org-mode 是否有一个键绑定(bind)可以在编号/项目符号列表项之间移动，就像您可以对标题一样？喜欢的功能: org-forward-heading-same-level 大纲下一个可见标题
org-mode - Emacs Org-mode - 导出到另一个目录？
我知道这有点小，但它一直困扰着我。我正在为一个项目使用 Org-mode，我倾向于经常导出为 PDF 或 HTML，这使我的目录中散落着 PDF、Tex 和 HTML 文件。有没有办法将 Org 模式
org-mode - 让 org-mode 继续编号列表而不是重新启动
有什么方法可以让 org-mode 继续编号列表而不是重新启动？这是情况。你列了一个类似的列表: Sometimes you can restart the display by doing som
org-mode - 枚举 org-mode 下的所有标签
如何在组织模式文件中生成所有标签的枚举列表(例如 :tag:)？假设我有一个以下形式的列表: * Head1 :foo:bar: ** Subhead1 :foo: * Head2
emacs - org-mode 不喜欢 c++-mode
我正在使用 org-mode(Emacs:24.3.1，org-mode: 7.9.3f 8.0.6)作为不同代码片段的数据库语言(目前主要是 elisp 和 python)。这在使用 org-mod
emacs - ORG-MODE 内部 SQL-MODE 的字体锁定而不是字体锁定
相关问题:org-mode: fontify code blocks natively 截至 2012 年 11 月 1 日，我已经获得了最新的 org-mode 和 emacs 版本(组织存储在 o
emacs - ido-mode 区分 dired-mode 缓冲区名称
有谁知道在使用 ido 模式时区分 dired 模式缓冲区名称与迷你缓冲区中其他类型缓冲区的好方法吗？例如...在 dired 模式缓冲区名称末尾显示正斜杠？最佳答案您可以简单地更改dired-m
Python argparse.ArgumentParser 无法区分 `--modes` 和 `--mode`
在这个示例脚本中 import argparse parser = argparse.ArgumentParser() parser.add_argument('--modes', help="tes
linux - "Switching from user mode to kernel mode"是一个错误的概念
我第一次学习“操作系统”。在我的书中，我发现了关于“用户模式”和“内核模式”的这句话: "Switch from user to kernel mode" instruction is execute
android - 处理android模式安装报错: could not move mode "Android Mode" to the sketchbook
我刚刚下载了 Processing 2.0 并尝试从“模式管理器”安装 Android 模式。但是在安装时出现错误提示:“无法将模式“Android 模式”移动到速写本”。我怎样才能摆脱这个错误？最
安卓相机 : Can not change flash mode from torch to other mode
在 android L 中，我尝试将相机闪光灯模式设置为 TORCH，它工作正常，但我无法将其更改回闪光灯模式 AUTO 或闪光灯模式打开。我只能返回闪存模式 OFF。我尝试了像 camera360
Git diff 报告本地更改 'old mode'/'new mode'
有 2 台机器，A 和 B。有 2 个分支，p16 和 c2。 A 有一个 ext3 文件系统，但在 B 上，存档位于带有 vfat 的 truecrypt 驱动器上，mount 显示 rw,uid=
emacs - 当全局 'linum-mode' 处于事件状态时，禁用速度条的 'linum-mode'
我有 linum-mode在我的 Emacs 配置中全局启用。全局启用意味着它也适用于不受欢迎的速度条。我为这个问题找到的唯一建议是在存档的 Emacs 帮助邮件列表中，它建议以下 speedbar
google-cloud-datastore - "Datastore mode"中的Firestore有什么优势 "Native mode"
Google Cloud Firestore 将很快取代旧的 Google Cloud Datastore。然后可以选择在“ native 模式”或“数据存储模式”下使用 Cloud Firestor
org-mode - Emacs 看到新的 org-mode 版本的目录，但加载旧版本
org-mode的版本我的版本 Emacs 附带的(24.5.2) 是 8.2.10 .我已安装版本 8.3.1从 ELPA 并将其添加到我的 init 文件中: (add-to-list 'load
org-mode - 在 org-mode 中创建 shell 脚本链接的示例
The org-mode manual指出 org-mode 将“”“...在 shell 链接”“”中执行命令，但它不显示此类链接的语法。我希望能有一个简单完整的示例来说明这种 shell 链接是
emacs - 如何一起使用 dart-mode 和 d-mode(为什么我们不能相处？)
我正在尝试在 emacs 24 中使用 dart 模式和 d 模式。如果我单独使用任何一种模式，一切都很好。如果我分别对每种类型的文件使用这两种模式，我在尝试缩进 D 代码时会出错。以下是在初始化时
flutter : Change Text Color CupertinoDatePicker in mode Dark Mode
我的应用程序中有 CupertinoDatePicker 以使用以下代码选择日期和时间: formatColumn( widget: Consumer( builder: (_, mcProvide

首页

博学

6Ren·AI

商城

jquery - Bootstrap Accordion 错误 : collapse switch back to visible mode