我是jQuery的新手，并且正在制作手风琴菜单。
我的问题是，我有菜单，我想让它固定大小，所以我想要它，这样当你将鼠标悬停在其中一个项目上时，它会放大，其他选项会缩小。
我无法弄清楚如何做到这一点。我尝试设置max-width并设置width，但它的作用是将一些div放在其他div之下以使它们全部合适。我希望所有东西都在同一条线上，每个div都会缩小一定数量。
这是我的代码：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#accordion > li').hover(
function () {
var $this = $(this);
$this.stop().animate({'width':'400px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
},
function () {
var $this = $(this);
$this.stop().animate({'width':'100px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
}
);
});
</script>
答案 0 :(得分：0)
试试这段代码。一个完美的答案你 的 HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Elegant Accordion with jQuery and CSS3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Elegant Accordion with jQuery and CSS3" />
<meta name="keywords" content="jquery, slide out,accordion, css3, fadeout, fadein, elegant, fancy, box shadow"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
background:#fff url(pattern.png) repeat top left;
}
a{
color:#444;
}
a:hover{
color:#999;
}
.title{
width:500px;
height:152px;
position:absolute;
top:0px;
left:0px;
background:transparent url(title.png) no-repeat top left;
}
a.back{
background:transparent url(back.png) no-repeat top left;
position:fixed;
width:150px;
height:27px;
outline:none;
bottom:0px;
left:0px;
}
#content{
margin:0 auto;
}
.reference{
clear:both;
top:300px;
left:0px;
position:absolute;
text-align:right;
width:400px;
padding:20px;
background-color:#fff;
-moz-box-shadow:1px 3px 15px #ddd;
-webkit-box-shadow:1px 3px 15px #ddd;
box-shadow:1px 3px 15px #ddd;
}
.reference p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:10px;
}
.reference p a:hover{
color:#333;
}
</style>
</head>
<body>
<div id="content">
<a class="back" href="http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/"></a>
<div class="title"></div>
<div class="reference">
<p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=901">Image 1: Michelle Meiklejohn / FreeDigitalPhotos.net</a></p>
<p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=879">Image 2: Luigi Diamanti / FreeDigitalPhotos.net</a></p>
<p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=503">Image 3: Tina Phillips / FreeDigitalPhotos.net</a></p>
<p><a href="http://www.freedigitalphotos.net/images/view_photog.php?photogid=1039">Image 4: Ahmet Guler / FreeDigitalPhotos.net</a></p>
</div>
<ul class="accordion" id="accordion">
<li class="bg1">
<div class="heading">Guler</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Guler</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.</p>
<a href="#">more →</a>
</div>
</li>
<li class="bg2">
<div class="heading">Phillips</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Phillips</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. </p>
<a href="#">more →</a>
</div>
</li>
<li class="bg3">
<div class="heading">Diamanti</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Diamanti</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.</p>
<a href="#">more →</a>
</div>
</li>
<li class="bg4 bleft">
<div class="heading">Meiklejohn</div>
<div class="bgDescription"></div>
<div class="description">
<h2>Meiklejohn</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt.</p>
<a href="#">more →</a>
</div>
</li>
</ul>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#accordion > li').hover(
function () {
var $this = $(this);
$this.stop().animate({'width':'480px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDown(500);
$('.description',$this).stop(true,true).fadeIn();
},
function () {
var $this = $(this);
$this.stop().animate({'width':'115px'},1000);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(500);
$('.bgDescription',$this).stop(true,true).slideUp(700);
}
);
});
</script>
</body>
</html>
<强> CSS
ul.accordion{
list-style:none;
position:absolute;
right:80px;
top:0px;
font-family: Cambria, serif;
font-size: 16px;
font-style: italic;
line-height: 1.5em;
}
ul.accordion li{
float:right;
width:115px;
height:480px;
display:block;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
position:relative;
overflow:hidden;
cursor:pointer;
-moz-box-shadow:1px 3px 15px #555;
-webkit-box-shadow:1px 3px 15px #555;
box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
background-image:url(../images/4.jpg);
}
ul.accordion li.bleft{
border-left:2px solid #fff;
}
ul.accordion li .heading{
background-color:#fff;
padding:10px;
margin-top:60px;
opacity:0.9;
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:14px;
color:#444;
text-align:center;
text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description{
position:absolute;
width:480px;
height:175px;
bottom:0px;
left:0px;
display:none;
}
ul.accordion li .description h2{
text-transform:uppercase;
font-style:normal;
font-weight:bold;
letter-spacing:1px;
font-size:45px;
color:#444;
text-align:left;
margin:0px 0px 15px 20px;
text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
line-height:14px;
margin:10px 22px;
font-family: "Trebuchet MS", sans-serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-transform: none;
letter-spacing: normal;
line-height: 1.6em;
}
ul.accordion li .description a{
position:absolute;
bottom:5px;
left:20px;
text-transform:uppercase;
font-style:normal;
font-size:11px;
text-decoration:none;
color:#888;
}
ul.accordion li .description a:hover{
color:#333;
text-decoration:underline;
}
ul.accordion li .bgDescription{
background:transparent url(../images/bgDescription.png) repeat-x top left;
height:340px;
position:absolute;
bottom:0px;
left:0px;
width:100%;
display:none;
}
选择并放置您选择的图像....好的。