Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/19: Рейтинг темы: голосов - 19, средняя оценка - 5.00
1 / 1 / 0
Регистрация: 07.11.2013
Сообщений: 6

Как прикрутить cookies к меню на jQuery

07.11.2013, 17:44. Показов 3706. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте программисты. Никак не могу прикрутить куки к меню с выпадающим списком (аккордионом) сделанном на jQuery, чтобы при открытии уровня и после перехода по ссылке, уровень оставался открытым. На этом форуме нашел схожую тему по адресу: Прикрутка cookies к меню на jquery проблема один в один, вот только там меню находится в блоке div с классом, а у меня меню в блоке с идентификатором и я чейто не допетрил, как в Скрипте сценария прописать не класс, а "id", как бы это смешно не звучало ), подскажите пожалуйста что нужно сделать?
HTML код меню:
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="menu_pop">
<ul id="accordion">
 <li><div>ГАЛЕРЕИ и СЛАЙДЕРЫ<br>
 <span class="button_podtext">Галереи и Слайдеры картинок с помощью jQuery</span></div>
 <ul>
 <li><a href="#">Ссылка 3</a></li>
 <li><a href="#">Ссылка 4</a></li>
 </ul>
 </li>
 <li><div>АНИМИРОВАННЫЙ ФОН ДЛЯ САЙТА<br>
 <span class="button_podtext">Анимированный фон с помощью jQuery</span></div>
 <ul>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 </ul>
 <li><div>МЕНЮ ДЛЯ САЙТА<br>
 <span class="button_podtext">Меню с помощью jQuery</span></div>
 <ul>
 <li><a href="#">Ссылка 4</a></li>
 <li><a href="#">Ссылка 1</a></li>
 </ul>
 </li>
 <li><div>РАЗНОЕ<br>
 <span class="button_podtext">Разные эффекты с помощью jQuery</span></div>
 <ul>
 <li><a href="#">Ссылка 3</a></li>
 <li><a href="#">Ссылка 4</a></li>
 </ul>
 </li>
</ul>
</div>
таблица стилей CSS:
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
#menu_pop {
 padding: 20px 20px 20px 20px;
 margin: 40px 20px 0 20px;
 width: 280px;
 border-radius: 6px;
 box-shadow:  0px 1px 5px #000;
}
 
#accordion {
 list-style: none;
 padding: 0px;
 margin: 0px;
}
 
#accordion .button_podtext {
 font-size: 9px;
 color: #b1b1b1;
}
 
#accordion div {
 display: block;
 cursor: pointer;
 text-decoration: none;
 display: block;
 padding: 8px 0px 8px 11px;
 background: #000;
 color: #ffffff;
 font-size: 12px;
 font-family: verdana;
 background: url('images/bg.png') 0px 0px;
 text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);
 list-style: circle;
}
 
#accordion div:hover {
 background: url('images/bg.png') 0px -44px;
}
 
 
 
#accordion ul a {
 color: #FF9800;
}
 
#accordion ul {
 list-style: none;
 padding: 5px;
 font-size: 10px;
 font-family: Tahoma;
 background: #1a1a1a;
 box-shadow: inset 0px 3px 6px rgba( 0, 0, 0, 0.7);
 display: none;
}
 
#accordion ul li {
 font-weight: normal;
 cursor: auto;
 padding: 3px 7px;
}
 
#accordion a {
 text-decoration: none;
}
 
#accordion a:hover {
 text-decoration: underline;
}
Вложения
Тип файла: zip menu.zip (77.0 Кб, 12 просмотров)
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
07.11.2013, 17:44
Ответы с готовыми решениями:

Прикрутка cookies к меню на jquery
Доброго времени суток! Вопрос вот в чем. Есть вертикально меню, аккордеон, несколько уровней. Но нужно сделать так, чтобы при открытии...

Посоветуйте как можно разобраться в работе с cookies / jQuery
Здравствуйте. Недавно столкнулся с такой задачей как работа с кукисами. Суть задачи следующая: у меня есть страница, при скролле которой из...

Cookies в JQuery
Такая проблема - делаю таймер обратного отсчета, но с использованием cookies, чтобы таймер не начинался заново при перезагрузке страницы....

5
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
07.11.2013, 21:34
Нужно плагин jquery.cookie.js скачать и подключить после библиотеки - можно здесь

JavaScript
1
<script type="text/javascript" src="vertical-sliding-menu-described/js/jquery.cookie.js"></script>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script type="text/javascript">
 $(document).ready(function(){
 
if($.cookie("num_open_ul")) { // если в куках есть число
 
        if($.cookie("num_open_ul")!=0) { // и это число не равно нулю - значит какой-то список открыт
           var number_eq=$.cookie("num_open_ul")-1; // уменьшаем порядковый номер на 1 так как eq   идёт с нуля
            $("#accordion ul").eq(number_eq).show(); // открываем соответствующий список
        }
        
       
    };
    
    
//Определяем по нажатию на какой элемент должны открыватся подменю
$("#accordion > li > div").click(function(){
            if(!$(this).next().is(':visible')) { // если кликнутый блок не раскрыт ( не виден список после него )
                        $('#accordion ul').slideUp(280);// сварачиваем все списки
                }
                $(this).next().slideToggle(280); // в любом случае переключаем (если открыт закрываем и наоборот) список после кликнутого блока
                        setTimeout(fncookie, 400);//задержка записи кук
 
                });
 
 
 
//запись в куки номера открытого меню 
function fncookie(){
var number_open_ul=0; // если ноль - то ни один не открыт
 
var i=0; // переменная- счётчик всех списков ul в меню 
$("#accordion ul").each(function(){
    i++;// порядковый номер просматриваемого списка увеличиваем на 1
    if($(this).is(':visible')){ // если блок виден то его порядковый номер заносим в специальную переменную
        number_open_ul=i;
    }
$.cookie("num_open_ul",number_open_ul);// записываем в куки номер открытого списка
        
});
}// end fncookie
 
 
});/*end  ready*/
</script>
0
1 / 1 / 0
Регистрация: 07.11.2013
Сообщений: 6
08.11.2013, 00:32  [ТС]
Soldado,
Здравствуйте еще раз,что-то не выходит никак. Вроде сделал все правильно.

1 Скачал и подключил библиотеку jQuery
2 Скачал по вашей ссылке плагин jquery.cookie.js и подключил его после библиотеки jQuery
3 Подключил плагин для работы раздвижного меню
Code
1
2
3
<script type="text/javascript" src="vertical-sliding-menu-described/js/jquery.js"></script>
<script type="text/javascript" src="vertical-sliding-menu-described/js/jquery.cookie.js"></script>
<script type="text/javascript" src="vertical-sliding-menu-described/js/jquery-latest.js"></script>
....Это все подключал между тегами <head></head> и правильно написал путь к файлам, где они лежат....
4 Потом вставил скрипт, который вы написали сразу после подкл. плагинов между тегами <head></head>:

Script
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script type="text/javascript">
 $(document).ready(function(){
 
if($.cookie("num_open_ul")) { // если в куках есть число
 
        if($.cookie("num_open_ul")!=0) { // и это число не равно нулю - значит какой-то список открыт
           var number_eq=$.cookie("num_open_ul")-1; // уменьшаем порядковый номер на 1 так как eq   идёт с нуля
            $("#accordion ul").eq(number_eq).show(); // открываем соответствующий список
        }
        
       
    };
    
    
//Определяем по нажатию на какой элемент должны открыватся подменю
$("#accordion > li > div").click(function(){
            if(!$(this).next().is(':visible')) { // если кликнутый блок не раскрыт ( не виден список после него )
                        $('#accordion ul').slideUp(280);// сварачиваем все списки
                }
                $(this).next().slideToggle(280); // в любом случае переключаем (если открыт закрываем и наоборот) список после кликнутого блока
                        setTimeout(fncookie, 400);//задержка записи кук
 
                });
 
 
 
//запись в куки номера открытого меню 
function fncookie(){
var number_open_ul=0; // если ноль - то ни один не открыт
 
var i=0; // переменная- счётчик всех списков ul в меню 
$("#accordion ul").each(function(){
    i++;// порядковый номер просматриваемого списка увеличиваем на 1
    if($(this).is(':visible')){ // если блок виден то его порядковый номер заносим в специальную переменную
        number_open_ul=i;
    }
$.cookie("num_open_ul",number_open_ul);// записываем в куки номер открытого списка
        
});
}// end fncookie
 
 
});/*end  ready*/
</script>
Но чето не хочет работать, может я что-нибудь неправильно сделал или может конфликтует инициализированный плагин внизу страницы после закрытия тега body:
Скрипт
Code
1
2
3
4
5
6
7
8
9
<script>
//Определяем по нажатию на какой элемент должны открыватся подменю
$("#accordion > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(280);
}
$(this).next().slideToggle(280);
});
</script>
Понять не могу?
0
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
08.11.2013, 01:01
Цитата Сообщение от Юрец-777 Посмотреть сообщение
3 Подключил плагин для работы раздвижного меню
Нет никакого плагина и не нужно
JavaScript
1
<script type="text/javascript" src="vertical-sliding-menu-described/js/jquery-latest.js"></script>
это библиотека. Откройте этот файл и увидите, что там написано
jQuery JavaScript Library v1.7.2
Моя ошибка - я не сказал, что нужно убрать скрипт внизу, я его поднял вверх к остальному коду (строки 16-23 в прошлом посте). Вот вся страница
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Анимация с помощью jQuery</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="shortcut icon" href="favicon.ico" type="image/icon">
<link rel="stylesheet" type="text/css" href="style.css"/>
 
 
 
<script type="text/javascript" src="vertical-sliding-menu-described/js/jquery-latest.js"></script>
<script type="text/javascript" src="vertical-sliding-menu-described/js/jquery.cookie.js"></script>
 
<script type="text/javascript">
 $(document).ready(function(){
 
if($.cookie("num_open_ul")) { // если в куках есть число
 
        if($.cookie("num_open_ul")!=0) { // и это число не равно нулю - значит какой-то список открыт
           var number_eq=$.cookie("num_open_ul")-1; // уменьшаем порядковый номер на 1 так как eq   идёт с нуля
            $("#accordion ul").eq(number_eq).show(); // открываем соответствующий список
        }
        
       
    };
    
    
//Определяем по нажатию на какой элемент должны открыватся подменю
$("#accordion > li > div").click(function(){
            if(!$(this).next().is(':visible')) { // если кликнутый блок не раскрыт ( не виден список после него )
                        $('#accordion ul').slideUp(280);// сварачиваем все списки
                }
                $(this).next().slideToggle(280); // в любом случае переключаем (если открыт закрываем и наоборот) список после кликнутого блока
                        setTimeout(fncookie, 400);//задержка записи кук
 
                });
 
 
 
//запись в куки номера открытого меню 
function fncookie(){
var number_open_ul=0; // если ноль - то ни один не открыт
 
var i=0; // переменная- счётчик всех списков ul в меню 
$("#accordion ul").each(function(){
    i++;// порядковый номер просматриваемого списка увеличиваем на 1
    if($(this).is(':visible')){ // если блок виден то его порядковый номер заносим в специальную переменную
        number_open_ul=i;
    }
$.cookie("num_open_ul",number_open_ul);// записываем в куки номер открытого списка
        
});
}// end fncookie
 
 
});/*end  ready*/
</script>
 
 
 
</head>
<body>
 
 
  
<div id="menu_pop">
<ul id="accordion">
 <li><div>ГАЛЕРЕИ и СЛАЙДЕРЫ<br>
 <span class="button_podtext">Галереи и Слайдеры картинок с помощью jQuery</span></div>
 <ul>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 3</a></li>
 <li><a href="#">Ссылка 4</a></li>
 <li><a href="#">Ссылка 1</a></li>
 </ul>
 </li>
 <li><div>АНИМИРОВАННЫЙ ФОН ДЛЯ САЙТА<br>
 <span class="button_podtext">Анимированный фон с помощью jQuery</span></div>
 <ul>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 3</a></li>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 3</a></li>
 <li><a href="#">Ссылка 4</a></li>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 </ul>
 </li>
 <li><div>РАЗНОЕ<br>
 <span class="button_podtext">Разные эффекты с помощью jQuery</span></div>
 <ul>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 3</a></li>
 <li><a href="#">Ссылка 4</a></li>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 </ul>
 </li>
</ul>
 </div>
 
</body>
 
</html>
1
1 / 1 / 0
Регистрация: 07.11.2013
Сообщений: 6
08.11.2013, 12:52  [ТС]
Soldado, Спасибо большое все заработало. К моему стыду я еще это меню тестировал просто на компьютере без интернета и ничего не работало, а вот при размещении его на сервере все отлично заработало.
Еще раз огромное спасибо!
0
Garasu
23.11.2013, 10:00
У меня подобное меню но ничего не получается. Пытаюсь подогнать структуру под меню выше и вообще все пропадает.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div>
 
<div id="accordion"><span ><h2>Заголовок</h2></span><span></span></div>
<ul>
    <li><a href="#">Статья</a></li>
    <li><a href="#">Статья</a></li>
    <li><a href="#">Статья</a></li>
    <li><a href="#">Статья</a></li>
    <li><a href="#">Статья</a></li>
    <li><a href="#">Статья</a></li>
</ul>
</div>
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
23.11.2013, 10:00
Помогаю со студенческими работами здесь

jQuery удаление cookies
Используя jquery.cookie.js столкнулся с проблемой удаление куки. Вроде бы все просто, но кука не удается, а дублируется. На странице есть...

Не получается прикрутить скрипт Jquery к wordpress
Есть шаблонная тема на wordpress, в которой уже используются скрипты, в том числе и на шаблонной странице. У меня стоит задача -...

Меню на jquery, как доделать?
Доброго времени суток. Помогите доделать меню. Сейчас все выглядит так Вот исходный текст &lt;!DOCTYPE html PUBLIC...

Прикрутка cookies к меню
День добрый, не выходит грамотно прикрутить jquery.cookies к раскрывающемуся меню . Нужно чтобы при открытии подуровня и перехода по...

Как сделать подобное меню jquery?
:) вот сайт как можно сделать такое меню,может кто знает... http://www.jodieraert.be/.


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Ниже машинный перевод статьи The Thinkpad X220 Tablet is the best budget school laptop period . Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы,. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru