Bootstrap Collapse 无法正常工作(隐藏不工作) [英] Bootstrap Collapse not working properly (Hide Not working)

查看:31
本文介绍了Bootstrap Collapse 无法正常工作(隐藏不工作)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用的引导折叠功能在我们的 IBM Web 门户中无法正常工作.它适用于显示"功能,但不适用于隐藏"功能.

<a href="#demo" data-toggle="collapse"><span class="icon">Collapsible</span></a><div id="demo" class="折叠">示例代码

我在控制台窗口中看到area-expanded"值在我们的折叠中没有改变,也没有像collapsed"和collapse 那样改变类名>在".

如何修复它.

解决方案

您的代码有效!但是,如果没有 jquery,它就不能正常工作.

<html lang="zh-cn"><头><title>标题</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><身体><div class="容器"><a href="#demo" data-toggle="collapse"><span class="icon">Collapsible</span></a><div id="demo" class="折叠">示例代码

</html>

I am using bootstrap collapse functionality is not working properly in our IBM web portal. It working fine on "show" functionality but not working in "Hide" functionality.

<a href="#demo" data-toggle="collapse"><span class="icon">Collapsible</span></a>

<div id="demo" class="collapse">
Sample Code 
</div>

I see in console window the "area-expanded" value did not change in our collapse and also did not change class name like "collapsed" and collapse in".

How to fix it .

解决方案

Your code works! but, It doesn't work properly without jquery.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <a href="#demo" data-toggle="collapse"><span class="icon">Collapsible</span></a>

    <div id="demo" class="collapse">
    Sample Code 
    </div>
</div>

</body>
</html>

这篇关于Bootstrap Collapse 无法正常工作(隐藏不工作)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆