我的网站上的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" alt="Microsoft Surface">
<!--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" alt="Microsoft Surface Type Cover">
<!--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" alt="Apple Macbook Pro Retina">
<!--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" alt="Apple SurperDrive">
<!--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" alt="Laptop Case">
<!--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%;
}
答案 0 :(得分:3)
多个元素不能具有相同的ID
。那么它不会识别,现在会吗?
在这些手风琴和行上使用类选择器,否则它只会找到第一个。
答案 1 :(得分:3)
Ids必须是唯一的,因为您已经使用它添加了公共类row
绑定事件。使用类选择器选择具有类
$(".row").mouseenter(function() {
$(this).animate({ fontSize : 14 });
});
$(".row").mouseleave(function() {
$(this).animate({ fontSize : 13 });
});
也使用手风琴的普通类,所以使用
<div class="accordion">
而不是
<div id="accordion">
然后你可以使用
$(".accordion").accordion()
答案 2 :(得分:2)
元素ID必须是唯一的。改为使用类。
<div class="accordion">...
$( ".accordion" ).accordion();
等
答案 3 :(得分:1)
原因是你将事件绑定到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>
您需要根据类添加。另外,请考虑将所有javascripts放在单个脚本标记下。