Dropdown menu + cookie?

V

Vadim Efremov2017-05-14 12:16:48

JavaScript

Vadim Efremov, 2017-05-14 12:16:48

Good day.

There is a vertical dropdown menu added the ability to keep menu sections open (or closed, depending on the user's choice) using cookies

How to fix the code - so that not one section of the MENU remains open or closed, but several

Here is the code

<html>
<head>

 
 
 
<script type='text/javascript' src='jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='jquery.cookie.js'></script>
 

 
<style type="text/css">

#navigation h2:hover, #navigation h2.navigation_head:hover {
 cursor: pointer;
}
.navigation_body {
 display:none;
}		
  
</style>	
 
</head>
<body>

 <div id='navigation'>
    <h2 class='navigation_head'>Старт</h2>
  <div class='navigation_body'>  
  ССЫЛКА 1
  </div>
        </div>
    
    <br>
 
  <br>
 <div class='navigation_body'>
  ССЫЛКА 2
  </div>
  
  
<script>
$(document).ready(function(){
     if($.cookie('num_open_ul')){ // проверили, есть ли запись в печеньках
     if($.cookie('num_open_ul') != 0){ // и эта запись не равна 0
     var number_eq = parseInt($.cookie('num_open_ul')-1);
     $('.navigation_body').eq(number_eq).show().prevAll('#navigation h2.navigation_head:first').addClass('active_navigation');
}
};
     $('#navigation h2.navigation_head').click(function(){ // при клике сработает эта функция
     if(!$(this).next().is(':visible')){
     $('div.navigation_body').siblings('div.navigation_body').slideUp(500); // если другие открыты- закрыли все, кроме текущего
}
  $(this).next('div.navigation_body').slideToggle(500).siblings('div.navigation_body').slideUp(500);
    $(this).toggleClass('active_navigation').siblings('#navigation h2.navigation_head').removeClass('active_navigation'); // открытому добавили класс, чтобы сменить стиль
     setTimeout(fncookie, 600); //сама запись в печеньки с задержкой, дабы скрипт до записи успел завершить работу (500мс- скорость, задержка- 600мс)
});
     function fncookie(){ // сама функция записи
     var number_open_ul = 0;
     var i = 0;
     $('div.navigation_body').each(function(){
     i++;
     if($(this).is(':visible')){
     number_open_ul = i;
}
  $.cookie('num_open_ul', number_open_ul, {expires:3, path:'/'}); // хранить 3 дня для всего сайта.
});
}
});
</script>		
</body>
 
</html>

LINK 2 is not displayed

Tell me what to fix?

In general, this will not be a menu!

When entering the page, a person clicks the link ( MENU ) and the site will have div blocks that are initially hidden display:none

Each div will have its own content - but it is necessary that they all be displayed on the site until you click on the link ( MENU ) again, that is, you will not delete cookies

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

V

Vadim Efremov, 2017-05-14
@Parfenctr

I delete this line Still does not open all the menus

$('div.navigation_body').siblings('div.navigation_body').slideUp(500); // если другие открыты- закрыли все, кроме текущего

F

fedornabilkin, 2017-05-14
@fedornabilkin

Each block is named uniquely and their states are recorded. Collect data into an array, serialize and write to cookies. Get the data from the cookie, deserialize into an array, and give the blocks the appropriate state.