Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Раскрывающееся меню на JQuery (может, кому пригодится)
 
 автор: aexb   (17.04.2008 в 10:04)   письмо автору
 
 

Вот, модифицируйте и пользуйтесь. Собственно, прелесть скрипта в том, что в тэги не нужно прописывать события onClick - их перехватывает функция.
<html>
<head>
<style>
.header { border-bottom: 1px dashed black; cursor: pointer; cursor: hand; }
#d2, #d3 { padding-top: 20px; }
.menu { width: 300px; height: 150px; background-color: black; color: white; display: none; }
.visible { display: block; }
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready( function() {
    $('span.header').click( function() {
        var parentID = $(this).parents('div').attr('id');
        $("#" + parentID + " > .menu").slideToggle( 'fast' );
    });
    return false;
});
</script>

</head>
<div id="d1">
    <span class="header">Новые идеи и новые решения</span>
    <div class="menu visible">
        Тут будет текст на чорном <br/>
    </div>
</div>
<div id="d2">
    <span class="header">Старые идеи и старые решения</span>
    <div class="menu">
        По-моему, отлично работает :)
    </div>
</div>
<div id="d3">
    <span class="header">И еще третий пункт меню</span>
    <div class="menu">
        Превеееееед :)
    </div>
</div>
</html>

   
 
 автор: Antohins   (17.04.2008 в 10:38)   письмо автору
 
   для: aexb   (17.04.2008 в 10:04)
 

А как следует переписать код чтобы вначале всё было свернуто ?

   
 
 автор: AlexSol   (17.04.2008 в 10:50)   письмо автору
 
   для: aexb   (17.04.2008 в 10:04)
 

>aexb
<script> 
$(document).ready( function() { 
    $('span.header').click( function() { 
        $(this).next().slideToggle( 'fast' ); 
    }); 
    return false; 
}); 
</script> 



>Antohins
<div class="menu visible"> замени на <div class="menu">

   
 
 автор: Antohins   (17.04.2008 в 15:56)   письмо автору
 
   для: AlexSol   (17.04.2008 в 10:50)
 

а как сделать чтобы высота блока выбиралась автоматом? Т.е. чтобы она зависела от количества инфы в этом блоке

   
 
 автор: Ninjak   (17.04.2008 в 16:27)   письмо автору
 
   для: Antohins   (17.04.2008 в 15:56)
 


.menu { width: 300px; height: 150px; background-color: black; color: white; display: none; }


Сотри высоту

.menu { width: 300px; background-color: black; color: white; display: none; }

   
 
 автор: Antohins   (17.04.2008 в 17:19)   письмо автору
 
   для: Ninjak   (17.04.2008 в 16:27)
 

спасибончес

   
 
 автор: aexb   (21.04.2008 в 09:32)   письмо автору
 
   для: AlexSol   (17.04.2008 в 10:50)
 

вооооот, воооот то, что я так долго искал :) спасибо!

upd.: но если, например, перед блоком "menu" будет нужен еще один элемент, то next() будет ссылаться уже на него, а не на "menu". но в данном случае именно так и нужно :)

   
 
 автор: AlexSol   (21.04.2008 в 11:36)   письмо автору
 
   для: aexb   (21.04.2008 в 09:32)
 

два next() :) но уж точно не через id.

смотрите http://visualjquery.com/1.1.2.html >DOM >Traversing

   
 
 автор: Rasher   (31.07.2008 в 02:39)   письмо автору
 
   для: aexb   (17.04.2008 в 10:04)
 

А можно ли сделать, чтобы после разворачивания пункта меню оно отановалось развернутым и после перехода на другую страницу и после обновления страницы, а по клику на пункт сворачивалось ?

   
 
 автор: sim5   (31.07.2008 в 06:12)   письмо автору
 
   для: Rasher   (31.07.2008 в 02:39)
 

Можно, записывайте состояние меню в cookie.

   
 
 автор: Rasher   (31.07.2008 в 13:59)   письмо автору
 
   для: sim5   (31.07.2008 в 06:12)
 

Как это сделать ?

   
 
 автор: sim5   (31.07.2008 в 16:06)   письмо автору
 
   для: Rasher   (31.07.2008 в 13:59)
 

Доработать скрипт. Он должен проверять, установлена ли cookie. Если да, то ситать из нее (как я полагаю) раскрытый объект (ветвь мен.). При каждом раскрыти ветви меню, записывать cookie.

   
 
 автор: Axxil   (31.07.2008 в 16:58)   письмо автору
 
   для: Rasher   (31.07.2008 в 13:59)
 

Соседнюю тему ещё посмотрите. Может и без куков обойдётся.
http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=56184&page=1

   
 
 автор: sim5   (31.07.2008 в 17:51)   письмо автору
 
   для: Axxil   (31.07.2008 в 16:58)
 

По идее, должно работать и в CHM файлах, в отличие от куков.

   
 
 автор: madmo3r   (16.09.2008 в 21:51)   письмо автору
 
   для: sim5   (31.07.2008 в 17:51)
 

А если открыть один список, как сделать чтоб все остальные открытые закрылись?!

   
 
 автор: shah   (05.10.2008 в 23:01)   письмо автору
 
   для: aexb   (17.04.2008 в 10:04)
 

Может кто-нибудь знает для чего нужна строчка: <script src="http://code.jquery.com/jquery-latest.js"></script>?
И можно ли без ее обойтись?

   
 
 автор: sl1p   (06.10.2008 в 01:18)   письмо автору
 
   для: shah   (05.10.2008 в 23:01)
 

омг скачай то шо по ссылке и подключай сам скрипт.

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования