подменю при клике должно оставаться открытым

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

<div class="ul_container">  

<ul class="mainnav" id="nav" style="list-style:none;"> 

 <li><a  id="active" href="index.html"><strong>HOME</strong></a></li>

 <li><a  href="javascript:void(0)" onclick="toggleID('sub1')">COLLECTIONS</a>

    <ul class="subnav" id="sub1" style="display:none">
        <li class="first"><a href="Collections_PE_13.html">spring/summer 2013</a>
    <li class="first"><a href="Collections_AI_13.html">autumn/winter 2013</a>

        <li class="first"><a href="Collections_AI_12.html">autumn/winter 2012</a>
        <li class="first"><a href="Collections.html">autumn/winter 2011</a>

    </ul>

 </li>

 <li><a  href="Portrait.html">PORTRAIT</a></li>

 <li><a  href="Heritage.html">HERITAGE</a></li>

 <li><a  href="Press.html">PRESS</a></li>

 <li><a  href="Contacts.html">CONTACTS</a></li> 

</ul>

</div>

и js

function toggleID(IDS) {

  var sel = document.getElementById('nav').getElementsByTagName('ul');

  for (var i=0; i<sel.length; i++) { 

    if (sel[i].id != IDS) { sel[i].style.display = 'none'; }

  }

  sel = document.getElementById(IDS);

  sel.style.display = (sel.style.display != 'block') ? 'block' : 'none';

}

javascript menu submenu items
person user3382853    schedule 13.03.2014    source источник
comment
У вас есть ошибки в html-разметке. эти субнавигаторы не закрыты   -  person Urban Björkman    schedule 13.03.2014

Ответы (2)


arrow_upward
0
arrow_downward

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

Если это так, вам нужно запомнить состояние подменю. Вы можете сделать это с помощью файлов cookie или локального хранилища.

Html (просто небольшие изменения, такие как удаление onclick и исправление html)

<div class="ul_container">  
<ul class="mainnav" id="nav" style="list-style:none;"> 
 <li><a  id="active" href="index.html"><strong>HOME</strong></a></li>
 <li><a  href="javascript:void(0)">COLLECTIONS</a>
    <ul class="subnav" id="sub1">
        <li class="first"><a href="Collections_PE_13.html">spring/summer 2013</a></li>
        <li class="first"><a href="Collections_AI_13.html">autumn/winter 2013</a></li>

        <li class="first"><a href="Collections_AI_12.html">autumn/winter 2012</a></li>
        <li class="first"><a href="Collections.html">autumn/winter 2011</a></li>
    </ul>
 </li>
 <li><a  href="Portrait.html">PORTRAIT</a></li>
 <li><a  href="Heritage.html">HERITAGE</a></li>
 <li><a  href="Press.html">PRESS</a></li>
 <li><a  href="Contacts.html">CONTACTS</a></li> 
</ul>
</div>

Javascript (используя jquery с локальным хранилищем)

if(localStorage.getItem("state") == "closed")  // <-- this checks closed/open state and sets subnav accordingly
    $('.subnav').hide();


$('.subnav').parent().click(function () {
    $(this).find('#sub1').toggle(); //<-- This toggles the menu open/close

    // ** Remeber state ** //
    if (localStorage.getItem("state") == "open") {
        localStorage.setItem("state", "closed"); // <-- this remembers "open" after user navigates        
    } else {
        localStorage.setItem("state", "open"); // <-- this remembers "open" after user navigates
    }
    // ** Remeber state ** //
});

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

Проверьте рабочую скрипку здесь

http://jsfiddle.net/urbanbjorkman/jGwnz/

person Urban Björkman    schedule 13.03.2014

arrow_upward
0
arrow_downward

Урбан Бьоркман, я использую ваш код, но что-то не так... верно?

<html>
<head>
<script type="text/javascript" >
if (localStorage.getItem("state") == "closed") // <-- this checks closed/open state and sets subnav accordingly
$('.subnav').hide();


$('.subnav').parent().click(function () {
    $(this).find('#sub1').toggle(); //<-- This toggles the menu open/close

    // ** Block to remeber state ** //
    if (localStorage.getItem("state") == "open") {
        localStorage.setItem("state", "closed"); // <-- this remembers "open" after user navigates        
    } else {
        localStorage.setItem("state", "open"); // <-- this remembers "open" after user navigates
    }
    // ** Block to remeber state ** //
});
</script>
</head>
<body>
<div class="ul_container">
    <ul class="mainnav" id="nav" style="list-style:none;">
        <li><a id="active" href="index.html"><strong>HOME</strong></a>
        </li>
        <li><a href="javascript:void(0)">COLLECTIONS</a>

            <ul class="subnav" id="sub1">
                <li class="first"><a href="Collections_PE_13.html">spring/summer 2013</a>
                </li>
                <li class="first"><a href="Collections_AI_13.html">autumn/winter 2013</a>
                </li>
                <li class="first"><a href="Collections_AI_12.html">autumn/winter 2012</a>
                </li>
                <li class="first"><a href="Collections.html">autumn/winter 2011</a>
                </li>
            </ul>
        </li>
        <li><a href="Portrait.html">PORTRAIT</a>
        </li>
        <li><a href="Heritage.html">HERITAGE</a>
        </li>
        <li><a href="Press.html">PRESS</a>
        </li>
        <li><a href="Contacts.html">CONTACTS</a>
        </li>
    </ul>
</div>
 </body>
 </html>
person user3382853    schedule 14.03.2014