Раскрыть аккордеон при переходе на другую страницу
Здравствуйте, не знаю как решить проблему, перебрал все, уже и сломал пару раз. У меня на сайте меню сделано аккордеоном, но дали задачу при переходе на новую страницу из этого меню, аккордеон должен раскрываться в нужном месте и показываться на какой странице я нахожусь.
Структура html <ul> <li> <span class="menugreen panel-heading">Драйвера</span> <div class="panel-collapse" style="display: none;"> <a href="ссылка">Выбор 1</a> <a href="ссылка">Выбор 2</a> </div> </li> <li> <span class="menugreen panel-heading">Мышки</span> <div class="panel-collapse" style="display: none;"> <a href="ссылка">Выбор 1</a> <a href="ссылка">Выбор 2</a> </div> </li> </ul> И код js $(document).ready(function () { $('.panel-heading').click(function () { $(this).toggleClass('in').next().slideToggle(); $('.panel-heading').not(this).removeClass('in').next().slideUp(); }); }); Само меню работает как надо, буду очень благодарен если кто поможет, плохо шарю в jquery. Если я правильно понимаю, нужно брать текущий url и как-то найти его в аккордеоне и присвоить panel-heading класс in. Сайт на WP |
$(document).ready(function () { $('.panel-heading').click(function () { $(this).toggleClass('in').next().slideToggle(); $('.panel-heading').not(this).removeClass('in').next().slideUp(); }); $('.panel-collapse a').each(function(){ if(document.location.href == this.href) { $(this).css('color', 'red').parent().prev().click(); // красим ссылку в красный и открываем меню } }); }); |
Спасибо огромное, все работает
|
Помогите пожалуйста раскрыть аккордеон при переходе на другую страницу
В javascript пока новичок, просто срочно нужно. Заранее спасибо. Вот код HTML <ul class='left_nav_menu' id='nav_menu_content'> <li align=center style="COLOR:white; background-color:#F06456">Налоги</li> <li><a href='#0'> Налоговая система</a> <ul> <li><a href="nalog.php?n=101"> Налоговая система</a></li> <li><a href="nalog.php?n=102"> Налоговая система</a></li> <li><a href="nalog.php?n=103"> Налоговая система</a></li> <li><a href="nalog.php?n=104"> Налоговая система</a></li> <li><a href="nalog.php?n=105"> Налоговая система</a></li> </ul> </li> </ul> <!-- Вызываем инициализацию скрипта по "onload" пиксельной картинки --> <img src="http://s3.uploads.ru/xh6sQ.gif" onload="InitFunk()"/> Вот код CSS #nav_menu_content{ list-style: none; padding-left: 3px; display:inline-block; width:100%; } #nav_menu_content ul { text-align:left; padding-left: 3px; padding: 5px 0px; list-style: none; display: none; } #nav_menu_content li { list-style: none; margin:0px 0px 0px 0px; padding:15px 15px; } #nav_menu_content > li { border:1px solid #708090; border-bottom: 0px solid #708090; background-color: #F5F5F5; padding-left: 3px; font-size: 16pt; text-shadow:none; } #nav_menu_content > li > ul > li{ border:0px solid blue; text-shadow:none; font-size:14pt; background-color: #FFFFFF; padding:5px 5px; } Вот код javascript function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;} function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;} var InitFunk = function() { var nav = $("#nav_menu_content"); var uls = nav.find("ul"); var coci_MENU= getcookie( "MENU" ); if (coci_MENU) { setcookie( "MENU",coci_MENU ,30*3600*24*1000 ); // тут получаем индексы из куки и перебираем их: var showedElems = ( coci_MENU || "" ).split(","); for( var i = 0; i < showedElems.length; i++ ) { // отображаем при загрузке то что надо. $( uls[ showedElems[ i ] ] ).show(); }} nav.find("a").click(function() { var Lnk=$(this).attr("href"); if(Lnk==''||Lnk.indexOf('#')==0) setcookie( "MENU",1 ,-1); var self = $(this).next(); if ( self.length == 0 ) return; var showedElems = []; uls.each(function( index ){ if ( this === self[0] ) { if ( self.css('display') == "none" ) {showedElems.push(index);} $( this ).slideToggle( 200 );return true; } if ( jQuery.inArray( this, self.parents( "ul" ) ) == -1 ) { $( this ).slideUp( 200 );return true; } showedElems.push(index); }); // эту переменную суём в куки, setcookie( "MENU", showedElems.join(",") ,30*3600*24*1000 ); return false; }); } |
добавьте в скрипт после вашего кода
$(function () { $('#nav_menu_content li>a').eq(0).click(); }); |
Спасибо за ответ. К сожалению, код не сработал. Попробовал добавить ваш код с ответа на предыдущий аналогичный вопрос.
nav.find("a").each(function() { var Lnk=$(this).attr("href"); if(document.location.href == Lnk) { $(this).parents().prev().click(); // красим ссылку в красный и открываем меню } }); Код работает, на когда перезагружаешь страницу F5, то все сворачивается. Затем, если заново нажать F5 раскрывается. А если нажать на другую ссылку в меню, то опять же все сворачивается. А нужно, чтобы при перезагрузке или нажатии на другую ссылку ничего не сворачивалось. Добавил еще вот это setcookie( "MENU", 1 ,-1 ); return false; Теперь если перейти на другую категорию ссылок (ul ) то, при клике все сворачивается. Затем если нажать F5 открывается правильно. |
Помогите. Я никак не могу понять как тут вставить развёртывание в зависимости от текущей страницы
<script type="text/javascript"> $(document).ready(function () { $('.sub > a').click(function(){ $('.sub ul').slideUp(); if ($(this).next().is(":visible")){ $(this).next().slideUp(); } else { $(this).next().slideToggle(); } return false; }); $('.mini-menu > ul > li > a').click(function(){ $('.mini-menu > ul > li > a, .sub a').removeClass('active'); $(this).addClass('active'); }), $('.sub ul li a').click(function(){ $('.sub ul li a').removeClass('active'); $(this).addClass('active'); }); }); </script> <div class="mini-menu"> <ul> <li> <a href="#">Главная</a> </li> <li class="sub"> <a href="#">Пункт Меню - 1</a> <ul> <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="#">Ссылка - 5</a></li> <li><a href="#">Ссылка - 6</a></li> <li><a href="#">Ссылка - 7</a></li> <li><a href="#">Ссылка - 8</a></li> </ul> </li> <li class="sub"> <a href="#">Пункт Меню - 2</a> <ul> <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="#">Ссылка - 5</a></li> <li><a href="#">Ссылка - 6</a></li> <li><a href="#">Ссылка - 7</a></li> <li><a href="#">Ссылка - 8</a></li> <li><a href="#">Ссылка - 9</a></li> </ul> </li> <li class="sub"> <a href="#">Пункт Меню - 3</a> <ul> <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="#">Ссылка - 5</a></li> </ul> </li> <li> <a href="#">Контакты</a> </li> </ul> </div> <style> .mini-menu { margin: 0px auto; max-width: 220px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.7); -webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.4); -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.4); box-shadow:0 0 8px rgba(0, 0, 0, 0.4); overflow: hidden; font: normal 14px Helvetica, Arial, sans-serif; } .mini-menu ul { list-style: none; margin: 0; padding:0; text-align:left; } .mini-menu > ul > li { position: relative; } .mini-menu > ul > li > a { display: block; outline: 0; padding: .7em 1em; text-decoration: none; color:#C9C9C9; font-weight: normal; text-shadow: 1px 1px 3px #111; background: #333; border-bottom: 1px solid #222; background-image:-webkit-linear-gradient(#444, #333); background-image:-moz-linear-gradient(#444, #333); background-image:-ms-linear-gradient(#444, #333); background-image:linear-gradient(#444, #333); -webkit-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1); -moz-box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1); box-shadow:inset 0 1px 0 0 rgba(250,250,250,0.1); } .mini-menu > ul > li > a:hover, .mini-menu > ul > li > a.active { color:#f2bd00; } .mini-menu .sub > ul { display: none; overflow: hidden; background: #eee; -webkit-box-shadow:inset 0 0 50px #bbb; -moz-box-shadow:inset 0 0 50px #bbb; box-shadow:inset 0 0 50px #bbb; } .mini-menu .sub > ul > li > a { color:#514b92; display: block; font-size: 12px; text-decoration: none; padding: .7em 1em; border-bottom: 1px dotted #bababa; } .mini-menu .sub > ul > li > a:hover, .mini-menu .sub > ul > li > a.active { background: #d8d8d8; color: red; padding-left: 1.3em; } .mini-menu .sub > ul > li > a:after{ content: "»"; float: left; margin-right:6px; line-height: 12px; } .mini-menu .sub > a:before { content:'•'; height:12px; width:12px; font-size: 1em; display:inline-block; position: absolute; right: 10px; top: 12px; background: #333; line-height: .8em; color: red; text-indent: 0; text-align: center; text-shadow:none; font-weight: 500; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15); } /* активный переключатель */ .mini-menu .sub > a.active:before{ color: #f2bd00; } </style> |
Цитата:
|
Как прописать "Если href адрес пункта меню соответствует текущему href окна страницы, тогда этот пункт сделать активным и список меню, содержащий этот пункт сделать открытым". Могу добавить класс. раскрыть не могу
|
JAMLIGHT,
$(document).ready(function () { $('.sub > a').click(function(){ $('.sub ul').slideUp(); if ($(this).next().is(":visible")){ $(this).next().slideUp(); } else { $(this).next().slideToggle(); } return false; }); $('.mini-menu > ul > li > a').click(function(){ $('.mini-menu > ul > li > a, .sub a').removeClass('active'); $(this).addClass('active'); }), $('.sub ul li a').click(function(){ $('.sub ul li a').removeClass('active'); $(this).addClass('active'); }); var a = $('[href="'+document.location.href+'"]'); if(a.length){ a.parents("ul:first").prev().click(); a.click() } }); |
Часовой пояс GMT +3, время: 16:50. |