调整手风琴菜单jQuery的大小
我不熟悉调整手风琴菜单jQuery的大小,jquery,html,css,Jquery,Html,Css,我不熟悉jQuery，也不熟悉创建手风琴菜单 我的问题是，我有菜单，我想让它成为一个固定的大小，所以我想要它，这样每当你停留在一个项目，它扩大和其他选项缩小 我想不出怎么做。我试过设置一个最大宽度和一个宽度，但它的作用是将一些div放在其他div的下面，使它们都适合。我希望所有的东西都在同一条线上，每个部门都收缩一定量 这是我的密码： <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jque
jQuery最大宽度宽度 <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>
$（函数（）{
$（'#accordion>li'）。悬停(
函数（）{
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（）；
},
函数（）{
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）；
}
);
});
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>
选择并放置您选择的图像…好。请添加html代码，一把小提琴将非常适合开始使用。你能提供一个提琴吗？这里有一个提琴：我正在尝试获取动画和流程，但我不知道如何将其添加到我当前的项目中。它只是显示纯html，没有显示脚本或样式。它工作正常，但我想实现的是两者之间的混合，我只想要一个手风琴菜单，它看起来和第一个链接中的一样，但是我想要手风琴菜单保持相同的高度，不管是否有一个标签打开。因此，当一个选项卡打开时，其他选项卡会收缩，使整个选项卡与关闭时的大小相同。这有意义吗？那么，在这个代码中你还想要什么？你说的像第一个链接一样对吗？我的问题是，我希望整个手风琴菜单永远不会超过448的大小，这样当一个选项卡在悬停时展开时。另一个缩小了一定的系数，以保持整个手风琴菜单的大小相同。谢谢你的帮助。
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;
}