jQuery- нужна помощь с всплываюшим меню
Добрый день пытаюсь создать меню со всплывающими вкладками.
Подскажите пожалуйста какую функцию нужно добавить, чтобы: 1)При загрузке одна вкладка была открыта 2)Чтобы по клику на вкладку она сворачивалась Ниже код: <script>
$(document).ready(function () {
$('#accordion li').click(function () {
//slideup or hide all the Submenu
$('#accordion li').children('ul').slideUp('fast');
//remove all the "Over" class, so that the arrow reset to default
$('#accordion li > a').each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
});
//show the selected submenu
$(this).children('ul').slideDown('fast');
//add "Over" class, so that the arrow pointing down
$(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');
return false;
});
});
</script>
Буду очень признателен за помощь! |
оформите свой листинг BB - кодами.
|
Поправил
|
Что-то кода мало для менюшки - html-код еще покажите, а то неясно, что оно вообще делает.
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Accordion</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function () {
$('#accordion li').click(function () {
//slideup or hide all the Submenu
$('#accordion li').children('ul').slideUp('fast');
//remove all the "Over" class, so that the arrow reset to default
$('#accordion li > a').each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
});
//show the selected submenu
$(this).children('ul').slideDown('fast');
//add "Over" class, so that the arrow pointing down
$(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');
});
});
</script>
<style>
/* First Level UL List */
#accordion {
margin:0;
padding:0;
list-style:none;
}
#accordion li {
width:267px;
}
#accordion li a {
display: block;
width: 268px;
height: 43px;
text-indent:-999em;
outline:none;
}
/* Using CSS Sprite for menu item */
#accordion li a.popular {
background:url(menu.jpg) no-repeat 0 0;
}
#accordion li a.popular:hover, .popularOver {
background:url(menu.jpg) no-repeat -268px 0 !important;
}
#accordion li a.category {
background:url(menu.jpg) no-repeat 0 -43px;
}
#accordion li a.category:hover, .categoryOver {
background:url(menu.jpg) no-repeat -268px -43px !important;
}
#accordion li a.comment {
background:url(menu.jpg) no-repeat 0 -86px;
}
#accordion li a.comment:hover, .commentOver {
background:url(menu.jpg) no-repeat -268px -86px !important;
}
/* Second Level UL List*/
#accordion ul {
background:url(bg.gif) repeat-y 0 0;
width:268px;
margin:0;
padding:0;
display:none;
}
#accordion ul li {
height:30px;
}
/* styling of submenu item */
#accordion ul li a {
width:240px;
height:25px;
margin-left:15px;
padding-top:5px;
border-bottom: 1px dotted #777;
text-indent:0;
color:#ccc;
text-decoration:none;
}
/* remove border bottom of the last item */
#accordion ul li a.last {
border-bottom: none;
}
</style>
</head>
<body>
<br/><br/><br/>
<ul id="accordion">
<li>
<a href="#" class="popular" rel="popular">Popular Post</a>
<ul>
<li><a href="#">Popular Post 1</a></li>
<li><a href="#">Popular Post 2</a></li>
<li><a href="#" class="last">Popular Post 3</a></li>
</ul>
</li>
<li>
<a href="#" class="category" rel="category">Category</a>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#" class="last">Category 3</a></li>
</ul>
</li>
<li>
<a href="#" class="comment" rel="comment">Recent Comment</a>
<ul>
<li><a href="#">Comment 1</a></li>
<li><a href="#">Comment 2</a></li>
<li><a href="#" class="last">Comment 3</a></li>
</ul>
</li>
</ul>
<br/><br/><br/>
<a href="http://www.queness.com">Queness.com</a> | <a href="">Back to Tutorial</a>
</body>
</html>
|
http://www.queness.com/post/741/a-si...rdion-tutorial
вот собственно откуда я ее взял, просто я не шарю в программировании, взял тупо подходящий вариант, а вот как сделать так чтобы оно открывалось при загрузке и сворачивалось по клику не написано. |
Цитата:
|
За сколько сделаешь?
|
ну первую вкладку открыть - не проблема. А вот:
Цитата:
|
Ну это ладно, не так важно. Главное, чтобы открывалась одна при загрузке.
|
| Часовой пояс GMT +3, время: 16:12. |