Меню аккордеон

@PAGAR · Регистрация: 18.02.2013

Студворк — интернет-сервис помощи студентам

Есть менюшка аккордеон.
Как сделать так чтоб первый пункт меню по-умолчанию (при загрузке страницы) был развернут...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
  $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }
    if(!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");
      
      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }
    
    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

Добавлено через 1 час 24 минуты
Вот пример самого меню

@pavlinmavlin · 20.02.2013, 18:56

Сообщение от PAGAR

Есть менюшка аккордеон.
Как сделать так чтоб первый пункт меню по-умолчанию (при загрузке страницы) был развернут...

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
  $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }
    if(!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");
      
      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }
    
    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

Добавлено через 1 час 24 минуты
Вот пример самого меню

Задайте первому меню второго уровня определенный id и выставьте в файле стилей для него:

CSS
1
 display:block;

Или у самого меню второго уровня добавить:

HTML5
1
style='display:block;'

Пример:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <div id="w">
    <nav>
      <ul id="nav">
        <li><a align="center" href="#">КАТАЛОГ ТОВАРОВ</a>
          <ul style='display:block;'>
            <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>
            <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>
            <li><a href="#">ТЕХНИКА</a></li>
          </ul>
        </li>

@PAGAR · 20.02.2013, 19:24 **[ТС]**

Сообщение от pavlinmavlin

Задайте первому меню второго уровня определенный id и выставьте в файле стилей для него:

CSS
1
 display:block;

Или у самого меню второго уровня добавить:

HTML5
1
style='display:block;'

Спасибо работает именно так как надо... еще бы понять как подсвечивание текущей поддиректории сделать)... чтоб всем было понятно где они находятся...

@Probka · 21.02.2013, 03:23

Спасибо работает именно так как надо... еще бы понять как подсвечивание текущей поддиректории сделать)... чтоб всем было понятно где они находятся...

Буквально сегодня с такой менюшкой колдовал

Вот готовый вариант, и не нужно добавлять стиль CSS к первому пункту ибо это приводит к схлопыванию при первом клике, если нужно то лучше прописать это дело в скрипте.
Вот вам как вариант.
Добавляете в CSS класс .current

CSS
1
.current { background: #080; }

И немного дополненный скрипт - будет открыт раздел с ссылкой текущей страницы.

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
45
46
47
48
49
$(document).ready(function(){
    
    // Определяем совпадения URL текущей страницы и ссылок меню
    // Присваиваем к совпавшим новый класс
 
        var linkMenu = $("#nav li ul > li > a");
        linkMenu.each(function () {
        var link = $(this).attr('href');        
        var pathname = window.location.pathname;
        if(pathname == link) {$(this).parent("#nav li ul li").addClass('current');}
        });
    
        alert(window.location.pathname) //смотрим чему равен pathname, и корректируем ссылки в меню
            
        var currentLink = $("#nav li ul li.current"); // Переменная текущего пункта меню
        
        
    // Открываем раздел где найдена текущая ссылка
    // Добавляем класс к заголовку открытого раздела
 
    currentLink.each(function(){
      $(this).parent().slideToggle();
      $(this).parent().parent().children('a').addClass("open");
    }); 
    
     
    // Функция отвечающая за открытие/закрытие
    
  $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }
    
    if(!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");
      
      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }
    
    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

@PAGAR · 21.02.2013, 13:16 **[ТС]**

Сообщение от Probka

Буквально сегодня с такой менюшкой колдовал

Вот готовый вариант, и не нужно добавлять стиль CSS к первому пункту ибо это приводит к схлопыванию при первом клике, если нужно то лучше прописать это дело в скрипте.
Вот вам как вариант.
Добавляете в CSS класс .current

CSS
1
.current { background: #080; }

И немного дополненный скрипт - будет открыт раздел с ссылкой текущей страницы.

Кликните здесь для просмотра всего текста

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
45
46
47
48
49
$(document).ready(function(){
    
    // Определяем совпадения URL текущей страницы и ссылок меню
    // Присваиваем к совпавшим новый класс
 
        var linkMenu = $("#nav li ul > li > a");
        linkMenu.each(function () {
        var link = $(this).attr('href');        
        var pathname = window.location.pathname;
        if(pathname == link) {$(this).parent("#nav li ul li").addClass('current');}
        });
    
        alert(window.location.pathname) //смотрим чему равен pathname, и корректируем ссылки в меню
            
        var currentLink = $("#nav li ul li.current"); // Переменная текущего пункта меню
        
        
    // Открываем раздел где найдена текущая ссылка
    // Добавляем класс к заголовку открытого раздела
 
    currentLink.each(function(){
      $(this).parent().slideToggle();
      $(this).parent().parent().children('a').addClass("open");
    }); 
    
     
    // Функция отвечающая за открытие/закрытие
    
  $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }
    
    if(!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");
      
      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }
    
    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

У меня сэтим скриптом при загрузке и переходах вот такая гадость вылетает:

Кликните здесь для просмотра всего текста

Добавлено через 24 минуты
ну да... ну да...

JavaScript
1
alert(window.location.pathname)

@PAGAR · 21.02.2013, 15:11 **[ТС]**

С этим разобрался... правда при загрузке главной нужно чтоб первый раздел был открыт... но это уже датали... думаю с этим разберусь... а вот как закруглить углы всего блока... чот не доходит...

Добавлено через 1 час 34 минуты
Скрипт работает только в первом разделе... остальные схлопываются... так же меню схлопывается при переходе в товар подраздела... как бы заставит его помнить последний подраздел до нового совпадения...

@Probka · 21.02.2013, 16:43

так у вас в остальных разделах ссылки как записаны?

HTML5
1
/information.php?pages_id=16

Совпадений нет , вот и не открывает. В первом разделе у вас прямые ссылки, поэтому все работает. Вам алерт с подсказкой зачем дан был чтобы посмотреть что да как.
Но в вашем случаи все тоже можно поправить.
Попробуйте так:

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
45
46
47
48
49
50
51
$(document).ready(function(){
    
    // Определяем совпадения URL текущей страницы и ссылок меню
    // Присваиваем к совпавшим новый класс
 
    var linkMenu = $("#nav li ul > li > a");
     linkMenu.each(function () {
       var position = window.location.href;
       var link = this.href;
       var linkHahs = window.location.hash;
       var linkSearch = window.location.search;     
       if(position == link || position == link + linkHahs || position == link + linkSearch || position == link + linkSearch + linkHahs){
        $(this).parent('li').addClass('current');
       }
     });
            
        var currentLink = $("#nav li ul li.current"); // Переменная текущего пункта меню
        
        
    // Открываем раздел где найдена текущая ссылка
    // Добавляем класс к заголовку открытого раздела
 
    currentLink.each(function(){
      $(this).parent().slideToggle();
      $(this).parent().parent().children('a').addClass("open");
    }); 
    
     
    // Функция отвечающая за открытие/закрытие
    
  $("#nav > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }
    
    if(!$(this).hasClass("open")) {
      // hide any open menus and remove all other classes
      $("#nav li ul").slideUp(350);
      $("#nav li a").removeClass("open");
      
      // open our new menu and add the open class
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }
    
    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

Но при этом варианте ссылки в меню должны быть записаны полностью

HTML5
1
http://domen/folder/page***

@PAGAR · 21.02.2013, 17:01 **[ТС]**

Спасибо попробую...

Добавлено через 13 минут
Кстать при клике на разделе из товара перекидывает на главную...

@Probka · 21.02.2013, 19:36

Уберите атрибут href из ссылок разделов и перехода не будет. У вас записано

HTML5
1
2
3
4
5
6
7
8
9
10
<li>
  <a align="center" href="#">
МАТЕРИАЛЫ И МЕХАНИЗМЫ
   <br/>
МЯГКАЯ МЕБЕЛЬ
  </a>
     <ul>
       <li>
       <li>
       ***

он , href , там не нужен. тег A можно использовать и без него.

@PAGAR · 22.02.2013, 12:35 **[ТС]**

Сообщение от Probka

Уберите атрибут href из ссылок разделов и перехода не будет. У вас записано

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
<li>
  <a align="center" href="#">
МАТЕРИАЛЫ И МЕХАНИЗМЫ
   <br/>
МЯГКАЯ МЕБЕЛЬ
  </a>
     <ul>
       <li>
       <li>
       ***

он , href , там не нужен. тег A можно использовать и без него.

Это я попробовал сразу... но в таком случаи когда находишься в товаре то вообще никуда попасть нельзя... т.к. меню не разворачивается по клику...

Добавлено через 46 минут
Пробовал чот типа href="javascript:void(0)" или href="javascript://" не помогает...

@PAGAR · 25.02.2013, 14:13 **[ТС]**

Ни как не выходит чтоб находясь в товаре можно было разворачивать меню... или кидает на главную или не разворачивает...

@PAGAR · 04.03.2013, 16:34 **[ТС]**

Похоже мне тут не помогут

@Soldado · 04.03.2013, 18:22

Помогут. Запишите для первой ссылки класс и покажите соответствующий ul

HTML5
1
2
<li><a align="center" class="open" href="javascript://">КАТАЛОГ ТОВАРОВ</a>
          <ul  style="display:block">

@PAGAR · 05.03.2013, 19:19 **[ТС]**

Сообщение от Soldado

Помогут. Запишите для первой ссылки класс и покажите соответствующий ul

HTML5
1
2
<li><a align="center" class="open" href="javascript://">КАТАЛОГ ТОВАРОВ</a>
          <ul  style="display:block">

Спасибо... но проблема уже давно не в этом... там ниже по теме...

Добавлено через 7 часов 12 минут
Проблема скорее всего в том что у категорий адрес формата:
сайт/index.php/имя_категории_id
а товаров:
сайт/product_info.php/название_товара_id

Новые блоги и статьи Все статьи Все блоги /
изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@PAGAR 0 / 0 / 0 Регистрация: 18.02.2013 Сообщений: 25
	21.02.2013, 15:11 [ТС]
	С этим разобрался... правда при загрузке главной нужно чтоб первый раздел был открыт... но это уже датали... думаю с этим разберусь... а вот как закруглить углы всего блока... чот не доходит... Добавлено через 1 час 34 минуты Скрипт работает только в первом разделе... остальные схлопываются... так же меню схлопывается при переходе в товар подраздела... как бы заставит его помнить последний подраздел до нового совпадения... 0

@PAGAR 0 / 0 / 0 Регистрация: 18.02.2013 Сообщений: 25
	21.02.2013, 17:01 [ТС]
	Спасибо попробую... Добавлено через 13 минут Кстать при клике на разделе из товара перекидывает на главную... 0

@PAGAR 0 / 0 / 0 Регистрация: 18.02.2013 Сообщений: 25
	25.02.2013, 14:13 [ТС]
	Ни как не выходит чтоб находясь в товаре можно было разворачивать меню... или кидает на главную или не разворачивает... 0

@PAGAR 0 / 0 / 0 Регистрация: 18.02.2013 Сообщений: 25
	04.03.2013, 16:34 [ТС]
	Похоже мне тут не помогут 0