Форум

Роман1479 · #1 (**permalink**) 28.06.2018, 01:04

Здравствуйте, не знаю как решить проблему, перебрал все, уже и сломал пару раз. У меня на сайте меню сделано аккордеоном, но дали задачу при переходе на новую страницу из этого меню, аккордеон должен раскрываться в нужном месте и показываться на какой странице я нахожусь.
Структура 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

j0hnik · #2 (**permalink**) 28.06.2018, 01:30

$(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(); // красим ссылку в красный и открываем меню
		}
	});

});

Роман1479 · #3 (**permalink**) 28.06.2018, 09:53

Спасибо огромное, все работает

Simurg · #4 (**permalink**) 20.12.2018, 11:16

Помогите пожалуйста раскрыть аккордеон при переходе на другую страницу
В 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;

        });
}

j0hnik · #5 (**permalink**) 22.12.2018, 00:00

добавьте в скрипт после вашего кода

$(function () {
	$('#nav_menu_content li>a').eq(0).click();
});

Simurg · #6 (**permalink**) 22.12.2018, 14:50

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

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 открывается правильно.

JAMLIGHT · #7 (**permalink**) 23.12.2018, 14:36

Помогите. Я никак не могу понять как тут вставить развёртывание в зависимости от текущей страницы

<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>

рони · #8 (**permalink**) 23.12.2018, 14:47

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

развёртывание в зависимости от текущей страницы

что это значит?

JAMLIGHT · #9 (**permalink**) 23.12.2018, 14:58

Как прописать "Если href адрес пункта меню соответствует текущему href окна страницы, тогда этот пункт сделать активным и список меню, содержащий этот пункт сделать открытым". Могу добавить класс. раскрыть не могу

рони · #10 (**permalink**) 23.12.2018, 15:21

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()
  }

});

Форум

Справочник

Discord чат

Курсы javascript