手风琴剧本冲突
accordion script confliction
这是手风琴的演示。它在fiddle中工作得很好,但当我在html文件中复制代码时,它就不工作了。
这是HTML文件代码
编辑的HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="horizontalaccordion.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
</head>
<body>
<div class="horizontalaccordion">
<ul>
<li>
<h3>Heading 1</h3>
<div>Content For Panel 1.</div>
</li>
<li>
<h3>Heading 2</h3>
<div>Content For Panel 2.</div>
</li>
<li>
<h3>Heading 3</h3>
<div>Content For Panel 3.</div>
</li>
<li>
<h3>Heading 4</h3>
<div>Content For Panel 4</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('h3','.horizontalaccordion ul li').on('click',function() {
$(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});
});
</script>
</body>
</html>
如果从某些行中删除一些特殊字符,它就会起作用。在一些像vim这样的真实文本编辑器中打开你的html文件,你就会看到。我在vim中看到类似<200b>
符号的东西,如果我删除它们,那么它就可以正常工作。
只需复制此:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="horizontalaccordion.css"
type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
</head>
<body>
<div class="horizontalaccordion">
<ul>
<li>
<h3>Heading 1</h3>
<div>Content For Panel 1.</div>
</li>
<li>
<h3>Heading 2</h3>
<div>Content For Panel 2.</div>
</li>
<li>
<h3>Heading 3</h3>
<div>Content For Panel 3.</div>
</li>
<li>
<h3>Heading 4</h3>
<div>Content For Panel 4</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('h3', '.horizontalaccordion ul li').on('click', function () {
$(this).closest('li').toggleClass('hover').siblings().removeClass('hover');
});
});
</script>
</body>
</html>
可能是您的CSS文件加载不正确,请确保.CSS文件靠近.htm文件,如果没有尝试下载.js文件并将src更改为下载位置。除此之外,我认为没有任何问题
相关文章:
- 手风琴可点击并悬停
- Javascript-ID冲突的几率
- 响应动画手风琴不工作
- 如何只使用特定的表行构建简单的手风琴
- 导致内容安全策略(CSP)冲突错误的本地jquery.js文件
- JQuery-停止手风琴链接关闭所有选项卡
- 如何设置第一个手风琴面板关闭
- 获得多个手风琴部分以保持开放
- Pg承诺性能提升:在冲突中
- 数据与Javascript中的继承冲突
- Angular ng控制器与ng应用程序冲突
- 返回按钮代码段的Jquery冲突
- 调试一个简单的jQuery函数;想知道是否与其他代码冲突
- 使用JavaScript和HTML5画布进行冲突检测
- javascript对象原型与jquery冲突
- jQuery与导航菜单上的mouseover事件冲突.
- JQuery手风琴菜单与mmenu冲突-JQuery 1.4 vs 1.7
- 手风琴剧本冲突
- Jquery选框和手风琴冲突
- 两个动态生成的引导手风琴相互冲突