Javascript .accordion() 不工作[重复]
Posted
技术标签:
【中文标题】Javascript .accordion() 不工作[重复]【英文标题】：Javascript .accordion() not working [duplicate] 【发布时间】：2015-09-08 08:00:50 【问题描述】：我的网站上的 javascript 有问题：
感谢您的帮助，我的 .mouseenter 和 .mouseleave() 已解决，但我的 .accordion() 仍然无法正常工作。有什么想法吗？
这是我的代码：
html:
<!DOCTYPE html>
<head>
<!--Accordion is not working, mouseenter is only working in first product, header is not all the way to the left-->
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-theme.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="js/bootstrap.js" />
<link rel="stylesheet" href="js/carousel.js" />
<link rel="stylesheet" type="text/css" href="shopping.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery- ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<header>
<h4><mark>Student Project #5 H.B.</mark></h4></br>
<h2>Premium Computer Supplies!</h2>
</header>
<body>
<!----------------------------------------------------------------->
<div class="row" id="row">
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img src="surface3.jpg" >
<!--Accordion heading-->
<div class="accordion">
<h4>Microsoft Surface Pro 3</h4>
<!--Description and price-->
<div>
<p>Insert description for the product here</p>
<p>Starting at $999!</p>
</div>
</div>
</div>
</div>
<!----------------------------------------------------------------->
<div class="row" id="row">
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img src="surface3cover.jpg" >
<!--Accordion heading-->
<div id="accordion">
<h4>Microsoft Surface Pro 3 Typer Cover</h4>
<!--Description and price-->
<div>
<p>Insert description for the product here</p>
<p>Starting at $129!</p>
</div>
</div>
</div>
</div>
<!----------------------------------------------------------------->
<div class="row" id="row">
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img src="mabook.jpg" >
<!--Accordion heading-->
<div id="accordion">
<h4>Macbook Pro Retina Display</h4>
<!--Description and price-->
<div>
<p>Insert description for the product here</p>
<p>Starting at $999!</p>
</div>
</div>
</div>
</div>
<!----------------------------------------------------------------->
<div class="row" id="row">
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img src="superdrive.jpg" >
<!--Accordion heading-->
<div id="accordion">
<h4>Apple SuperDrive</h4>
<!--Description and price-->
<div>
<p>Insert description for the product here</p>
<p>Starting at $79!</p>
</div>
</div>
</div>
</div>
<!----------------------------------------------------------------->
<div class="row" id="row">
<!--<div class="col-sm-3">-->
<!--Insert picture-->
<img src="case1.jpg" >
<!--Accordion heading-->
<div id="accordion">
<h4>Laptop Case</h4>
<!--Description and price-->
<div>
<p>Insert description for the product here</p>
<p>Starting at $39!</p>
</div>
</div>
</div>
</div>
<!----------------------------------------------------------------->
<script>
$(function()
$( ".accordion" ).accordion();
);
$( ".row" ).mouseenter(function()
$(this).animate( fontSize : 14 );
);
$( ".row" ).mouseleave(function()
$(this).animate( fontSize : 13 );
);
</script>
</body>
CSS:
img
width:300px;
height:200px;
header
background-color: crimson;
color:darkblue;
padding-left: 0;/*why is this not working*/
width:100%
body
width:80%;
background-color: lightgray;
font-size: 13;
padding-left: 5%
#row
background-color: white;
width:30%;
padding-left: 5%;
【问题讨论】：
在你的css中，在padding-left:和0之间放一个空格
因为每个id都必须唯一，jquery只抓取第一个。您应该为它们添加一个类并引用它。
ids 在文档中必须是唯一的。
当 Javascript 停止工作时，十分之九，你有一个无效的 DOM。确保您的标签打开和关闭均匀，您有唯一的 ID 等。
谢谢，我添加了这个空格并且填充保持不变？
【参考方案1】：
多个元素不能有相同的ID。那么它就不会是识别了，是吗？
在这些手风琴和行上使用类选择器，否则只会找到第一个。
【讨论】：
【参考方案2】：ID 必须是唯一的，因为您已经使用公共类 row 添加了绑定事件。使用类选择器选择所有具有类的元素
$(".row").mouseenter(function()
$(this).animate( fontSize : 14 );
);
$(".row").mouseleave(function()
$(this).animate( fontSize : 13 );
);
也可以和手风琴一起使用公共类，所以使用
<div class="accordion">
而不是
<div id="accordion">
然后就可以使用了
$(".accordion").accordion()
【讨论】：
谢谢，除了手风琴功能外，这对其他所有功能都有帮助。我将代码更改为 并将 javascript 更改为 .accordion，但是手风琴风格没有激活。有什么想法吗？ @hbteibet，对不起，伙计不知道 还是谢谢你，你之前的代码帮助了我！【参考方案3】：元素 ID 必须是唯一的。改用类。
<div class="accordion">...
$( ".accordion" ).accordion();
等等
【讨论】：
【参考方案4】：原因是您将事件绑定到 div id。您应该将事件绑定到类。
<script>
$(function()
$( ".accordion" ).accordion();
);
</script>
<script>
$( ".row" ).mouseenter(function()
$(this).animate( fontSize : 14 );
);
</script>
<script>
$( ".row" ).mouseleave(function()
$(this).animate( fontSize : 13 );
);
</script>
您需要添加相应的类。另外，请考虑将所有 javascript 放在单个脚本标记下。
【讨论】：
以上是关于Javascript .accordion() 不工作[重复]的主要内容，如果未能解决你的问题，请参考以下文章
javascript Divi Accordion Toggles默认关闭
JavaScript JQuery Accordion：动态检索活动标签/打开
javascript Uikit 3 Accordion + ScrollTo #uikit #jquery
JavaScript Accordion - 自动滚动到打开的手风琴顶部