Форум

andreyua · #1 (**permalink**) 11.03.2012, 12:49

Помогите сделать меню аккордеон на jquery
Как на этом сайте
http://kinocat.org/
Справа сверху (качество, страна, год)

T-sh · #2 (**permalink**) 11.03.2012, 14:06

.menucategory — блок с заголовками меню
.menubody — блок с ссылками

$(".menucategory").click(function(){
 $(this).find(".menubody").slideToggle("slow");
});

andreyua · #3 (**permalink**) 11.03.2012, 14:25

Сообщение от T-sh

.menucategory — блок с заголовками меню
.menubody — блок с ссылками

$(".menucategory").click(function(){
 $(this).find(".menubody").slideToggle("slow");
});

Это классы ?
Тоесть menucategory назначить на "качество"
а menubody - на те элементы, что снизу ?

T-sh · #4 (**permalink**) 11.03.2012, 14:31

да.

.menucategory — качество, страна, год.
.menubody — блоки со ссылками, которые раскрываются

в css прописать, кстати, сразу display:none; для .menubody

andreyua · #5 (**permalink**) 11.03.2012, 14:38

<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>

Что то не получается, напишите что куда, вставлять ... пожалуйста

T-sh · #6 (**permalink**) 11.03.2012, 14:50

в данном случае будет так:

.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>

andreyua · #7 (**permalink**) 11.03.2012, 15:01

<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>

Или это уже со мной что-то или может вы еще какие то библиотеки/скрипты используете.
Вот дан полный файл.
Сможете поменять его чтобы он работал ?

T-sh · #8 (**permalink**) 11.03.2012, 15:08

внимательно посмотри на html часть, которую я написал комментом выше и на свою.

andreyua · #9 (**permalink**) 11.03.2012, 15:17

Я уже перегрелся ))
Работает... Спасибо
Скажите, какие еще опции имеет slideToggle("slow")
Например указать точное время или побыстрей, есть возможность ?

T-sh · #10 (**permalink**) 11.03.2012, 15:21

slow, normal, fast или скорость в миллисекундах (1 секунда = 1000):

slideToggle("slow"), slideToggle("fast"), slideToggle(1000).

можно выполнить ещё и функцию по завершении:

.slideToggle("slow", function () {
        blah-blah-blah
      });

Форум

Справочник

Discord чат

Курсы javascript