Аккордеон (сврачивающийся/разворачивающийся) на jquery
Помогите сделать меню аккордеон на jquery
Как на этом сайте http://kinocat.org/ Справа сверху (качество, страна, год) |
.menucategory — блок с заголовками меню
.menubody — блок с ссылками
$(".menucategory").click(function(){
$(this).find(".menubody").slideToggle("slow");
});
|
Цитата:
Тоесть menucategory назначить на "качество" а menubody - на те элементы, что снизу ? |
да.
.menucategory — качество, страна, год. .menubody — блоки со ссылками, которые раскрываются в css прописать, кстати, сразу display:none; для .menubody |
<ul class="reset"> <li><span class="sublink"><b>Качество</b></span></li> <li class="submenu"> <ul class="reset"> <li><a href="#">подкатегория</a></li> <li><a href="#">подкатегория</a></li> </ul> </li> <li><span class="sublink"><b>Страна</b></span></li> <li class="submenu"> <ul class="reset"> <li><a href="#">подкатегория</a></li> <li><a href="#">подкатегория</a></li> </ul> </li> <li><span class="sublink"><b>Год</b></span></li> <li class="submenu"> <ul class="reset"> <li><a href="#">подкатегория</a></li> <li><a href="#">подкатегория</a></li> </ul> </li> </ul> Что то не получается, напишите что куда, вставлять ... пожалуйста |
в данном случае будет так:
.submenu{ display:none;}
$(".sublink").click(function(){
$(this).parent().find(".submenu").slideToggle("slow");
});
<ul class="reset">
<li><span class="sublink"><b>Качество</b></span>
<ul class="submenu">
<li><a href="#">подкатегория</a></li>
<li><a href="#">подкатегория</a></li>
</ul>
</li>
<li><span class="sublink"><b>Страна</b></span>
<ul class="submenu">
<li><a href="#">подкатегория</a></li>
<li><a href="#">подкатегория</a></li>
</ul>
</li>
<li><span class="sublink"><b>Год</b></span>
<ul class="submenu">
<li><a href="#">подкатегория</a></li>
<li><a href="#">подкатегория</a></li>
</ul>
</li>
</ul>
|
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js" charset="utf-8"></script>
<style type="text/css">
.submenu{ display:none;}
</style>
</head>
<body>
<div class="bltxtbg"><div class="bltxtmenu2">
<ul class="reset">
<li><span class="sublink"><b>Качество</b></span></li>
<li class="submenu">
<ul class="reset">
<li><a href="#">подкатегория</a></li>
<li><a href="#">подкатегория</a></li>
</ul>
</li>
<li><span class="sublink"><b>Страна</b></span></li>
<li class="submenu">
<ul class="reset">
<li><a href="#">подкатегория</a></li>
<li><a href="#">подкатегория</a></li>
</ul>
</li>
<li><span class="sublink"><b>Год</b></span></li>
<li class="submenu">
<ul class="reset">
<li><a href="#">подкатегория</a></li>
<li><a href="#">подкатегория</a></li>
</ul>
</li>
</ul>
</div></div>
<script type="text/javascript">
$(".sublink").click(function(){
$(this).parent().find(".submenu").slideToggle("slow");
});
</script>
</body>
Или это уже со мной что-то или может вы еще какие то библиотеки/скрипты используете. Вот дан полный файл. Сможете поменять его чтобы он работал ? |
внимательно посмотри на html часть, которую я написал комментом выше и на свою.
|
Я уже перегрелся ))
Работает... Спасибо Скажите, какие еще опции имеет slideToggle("slow") Например указать точное время или побыстрей, есть возможность ? |
slow, normal, fast или скорость в миллисекундах (1 секунда = 1000):
slideToggle("slow"), slideToggle("fast"), slideToggle(1000). можно выполнить ещё и функцию по завершении:
.slideToggle("slow", function () {
blah-blah-blah
});
|
| Часовой пояс GMT +3, время: 03:23. |