меню аккордеон по клику на значке +

[fiver]

Всем привет!

 

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

Кликаем по + выезжает подменю,за место + стоит -. Клик по - , убирается подменю, появляется +.

А сам родительский элемент является ссылкой на страницу, как и элементы подменю.

 

Перелапатил сегодня 7 аккордеонов на jquerу, у всех одно и тоже, родительский элемент работает как кнопка свернуть - развернуть подменю (а не как ссылка). И у всех один и тот же недостаток, при переходе на другую страницу, т.е. перезагрузки, все что открывалось, опять закрыто. Т.е. нет памяти развернутых подпунктов.

 

Вот меня удивляет, при таком огромном обилии готовых решений (только стили свои лепи), неужели никому не понадобились ссылки с главного меню и неужели всех устраивает меню без памяти?

 

Если кто даст ссылку на пример такого меню,  буду благодарен.

[li4e]

Советую изучить основы jquery и без проблем сможете сами это реализовать без библиотек. Советую книгу http://anton.shevchuk.name/jquery-book/
После вечера чтива начал уже решать рабочие вопросы.

[sigma77]

http://www.jqueryrain.com/demo/jquery-treeview/

[Bassline]

localStorage тебе в помощь http://blog.ksdaemon.ru/2010/12/proshhajjte-cookies-ili-zdravstvujj-localstorage/

[Q4Dizzy]

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

[mrnobody]

Нашел похожее меню, только вам придется взять оттуда разметку, стили и скрипты для этой менюшки.

https://developer.android.com/preview/setup-sdk.html

[fiver]

Да, вот это меню точно то что надо.

Совершается переход на другую страницу с главных разделов.

И при переходе в подразделы, сразу развернуто меню второго уровня.

Правда памяти нет, но да ладно, так тоже неплохо.

 

Но к сожалению я не в силах извлечь скрипты. Я посмотрел, там такие листинги.

И подключается там не jquery, a гугл js api

 

Нашел похожее меню, только вам придется взять оттуда разметку, стили и скрипты для этой менюшки.

https://developer.android.com/preview/setup-sdk.html

[mrnobody]

Вот вроде:

function initExpandableNavItems(rootTag) {  $(rootTag + ' li.nav-section .nav-section-header').click(function() {    var section = $(this).closest('li.nav-section');    if (section.hasClass('expanded')) {    /* hide me and descendants */      section.find('ul').slideUp(250, function() {        // remove 'expanded' class from my section and any children        section.closest('li').removeClass('expanded');        $('li.nav-section', section).removeClass('expanded');      });    } else {    /* show me */      // first hide all other siblings      var $others = $('li.nav-section.expanded', $(this).closest('ul')).not('.sticky');      $others.removeClass('expanded').children('ul').slideUp(250);      // now expand me      section.closest('li').addClass('expanded');      section.children('ul').slideDown(250);    }  });  // Stop expand/collapse behavior when clicking on nav section links  // (since we're navigating away from the page)  // This selector captures the first instance of <a>, but not those with "#" as the href.  $('.nav-section-header').find('a:eq(0)').not('a[href="#"]').click(function(evt) {    window.location.href = $(this).attr('href');    return false;  });}// Вызываем функциюinitExpandableNavItems('#nav');

Edited October 14, 2014 by mrnobody

[fiver]

на какой сервис можно выложить код jquery, стили и html, что бы можно было проверить работу и показать его другим?

[Switch74]

http://jsfiddle.net/ а вообще их много

[rus]

http://codepen.io

[fiver]

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

Но так как я совсем не ас в jquery, многое по неопытности у меня не выходит, поэтому я создал проектик -

http://jsfiddle.net/fiver77/sn6avvnp/

Вот на нем с вашей помощью я хочу поэтапно получить то что мне надо.

Постараюсь понапрасну вас не тревожить, но вопросов не избежать, т.к. делаю вроде как по документации, а в реалии не работает.

 

первая проблема которую я не смог решить, это что бы картинка (+ , - (там нет картинки, просто пустой имг 10 на 10)) добавлялась только к тем пунктам меню, в которых есть список ul.

 

Делаю так , в примере можно посмотреть -  http://jsfiddle.net/fiver77/sn6avvnp/

 

Мне кажется, что я выбираю все элементы li первого уровня, внутри которых есть ul

$('#glLi:has("ul")')

а потом делаю проверку, условие, если верно (true), то добавляю картинку в див, отвечающий за открытие, закрытие подменю.

if ($('#glLi:has("ul")'))    {        $('div.plus').append('<img src="img/1.gif">');    }

Но картинка добавляется и в тот li, где нет ul

Вроде по логике все железобетонно. Но не работает.

[mrnobody]

У вас id="glLi" два раза повторяется, так недопустимо: http://htmlbook.ru/html/attr/id.

Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

А теперь по вопросу — http://jsfiddle.net/mrnobody/sn6avvnp/2/

Edited October 17, 2014 by mrnobody

[fiver]

Спасибо, только мне не очень понятно - вот это что $('ul', '#nav_list_moy')

Что то я нигде не нашел такого выбора.

Знаю по тегу, знаю по селектору.

Я так понимаю это какой то хитрый выбор всех потомков ul в селекторе  #nav_list_moy ?

[fiver]

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

Хочется еще сделать так, что при открывании подпунктов меню, ранее открытый подпункт закрывался.

Вот что есть у меня - http://jsfiddle.net/fiver77/sn6avvnp/12/

При переходе на пункт меню, у которого есть подпункты, ему присваивается id=act и список раскрыт.

Все остальные закрыты. 

При переходе на пункт у которого нет подменю, все списки будут закрыты.

При клике на + происходит раскрытие, на минус раскрытие.

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

[Switch74]

Логика обычно проста:

1. сворачиваем все

2. раскрываем тот, по которому кликнули

 

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

если происходит клик по раскрытому, то последующего раскрытия не делаем

 

иначе можно просто пробегать по всем элементам и проверять их, закрыты ли они, иначе закрывать

естесно так же нужна проверка по какому элементу мы кликаем (раскрытому или закрытому)

Edited October 20, 2014 by Switch74

[fiver]

С логикой я разобрался, даже сделал рабочий вариант. - http://jsfiddle.net/fiver77/sn6avvnp/14/

Ни как не могу сделать переменную, со  всеми дивами за которыми следующий элемент ul

Это для того, что бы заработали плюсики и минусики.

Т.е. мне надо сначала закрыть все открытое, затем все картинки поменять на +, а потом открываем нужное и делаем картинку -.

[Switch74]

1. $('div.plus + ul') - этим вы не div выбираете, а ul

можно просто $('div.plus')

2. чтобы плюсик не появлялся у меню без подменю, удалите пустой <div class="plus"></div>

[fiver]

1. $('div.plus + ul') - этим вы не div выбираете, а ul

можно просто $('div.plus')

2. чтобы плюсик не появлялся у меню без подменю, удалите пустой <div class="plus"></div>

1. Я знаю что я выбрал ul. Я не могу выбрать div за которым следует ul.

2. Я бы так и сделал, но не могу удалить. Меню формируется из БД. Сегодня у раздела нет подразделов, а завтра появились, или наоборот.

Именно поэтому я так все и завернул, что бы можно было формировать любое кол-во разделов и подразделов.

 

Еще раз пересмотрел все способы выбора элементов DOM, никакого подходящего метода не нашел. Видимо надо через условие что то слепить.

 

Все, всем спасибо за помощь, все сделал и работает как надо (приделал костыли на php).

 

Но все таки интересно, как выбрать элемент DOM, по id и следующему за ним элементу.

За ответ плюсую

Edited October 20, 2014 by fiver

[mrnobody]

http://jquery.page2page.ru/index.php5/Поиск_элементов_лежащих_после_выбранных

[fiver]

http://jquery.page2page.ru/index.php5/Поиск_элементов_лежащих_после_выбранных

 

Как выбрать следующий ни у кого вопроса не возникало.

Как выбрать элемент если мы знаем его id и что за ним идет ul

Т.е. если id такой же, но следующий элемент не ul, а скажем опять div, то его выбирать не надо. 

[Switch74]

http://jsfiddle.net/sn6avvnp/15/

 

вообще можно было бы заморочиться и сделать все лучше - нет предела совершенству