javascript - popbox.css 和 bootstrap.css 之间的名称冲突

标签 javascript jquery html css twitter-bootstrap

我注意到如果同时使用 popbox.css 和 bootstrap.css 会出现问题。有人知道解决方案吗? 这是某人的 fiddle ,用于展示 popbox 的工作原理。

http://jsfiddle.net/kbwood/sV4bY/

如果您在 popbox 库之外加载 Bootstrap 库

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

它将不再有效。

这是一个不起作用的例子。删除 bootstrap.min.css 文件以使其工作

<!DOCTYPE html>
<head>
  <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  <title>PopBox</title>
  <link href="../static/css/popbox.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8">

</head>
<body>
<div class="container">

    <h1>PopBox</h1>

 <div class='popbox'>
   <a class='open' href='#'>
     <img src='' style='width:14px;position:relative;'> Click Here!
   </a>

   <div class='collapse'>
     <div class='box'>
       <div class='arrow'></div>
       <div class='arrow-border'></div>

       Content from first popup
     </div>
   </div>
 </div>  

</div>
</body>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="../static/js/popbox.js" type="text/javascript" charset="utf-8"></script>
   <link href="../static/css/bootstrap.min.css" rel="stylesheet">

<script type='text/javascript'>
   $(document).ready(function(){
     $('.popbox').popbox();
   });
</script>

最佳答案

问题是由于您已将 collapse 类应用于 div。在 Bootstrap 中,这些默认情况下是隐藏的,因为它是 Accordion 功能的一部分。从该 div 中删除该类或为其使用不同的名称。

示例:http://jsfiddle.net/tpjjsqg6/

关于javascript - popbox.css 和 bootstrap.css 之间的名称冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31442885/

相关文章:

javascript - 未捕获的 TypeError : jQuery(. ..).flexslider 不是函数

javascript - 如何在 javascript 中禁用 firefox 上的文本选择

javascript - 为什么反序列化后数组后面有文本 "1"

jquery - 使用jquery deferred同步动画和ajax

javascript - 将数组的索引插入一个对象

html - 图像下方不需要的边距

c# - 正则表达式提取属性值

javascript - jQuery 表单插件

javascript - 将 OOP javascript 与 jQuery DOM 操作混合

javascript - 无法更改使用视差滚动的图像宽度