Главная

Экономное 2-х уровневое меню на jQuery

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

Меню с эксклюзивно раскрываемыми пунктами. Покликайте на разных пунктах и посмотрите какой эффект это произведет.

  1. Первый пункт
    • Первый подпункт
    • Второй подпункт
    • Третий подпункт
  2. Второй пункт
    • Первый подпункт
    • Второй подпункт
    • Третий подпункт
  3. Третий пункт
    • Первый подпункт
    • Второй подпункт
    • Третий подпункт

Этот эффект (закрытие всех остальных пунктов при клике на этом пункте) реализуется очень просто - заданием в обработчике события onclick закрытия остальных пунктов $('#ul_22, #ul_23').hide();
после чего, как и раньше работает функция slideToggle():
$('#ul_21').slideToggle();return false

Код примера приведен ниже:
<div id="div1" style="font-family: Verdana; font-size: 17px; border: 1px solid #777777; width: 300px">

 <style>
    #ul_21 {background: rgb(230,230,230);}
    #ul_22 {background: rgb(230,200,250);}
    #ul_23 {background: rgb(250,250,200);}
    #div1 li ul {display:none; border: 1px solid #777777; width: 190px;}
    #div1 ol {margin: 5px; background: rgb(210,170,250); width: 250px; border: 1px solid #777777;}
    #div1 li a:hover {background: rgb(100,250,200);}
    #div1 ul li {border: 1px solid rgb(200,155,255); margin: 2px;}
 </style>

 <ol id="slide_ol" style="background: rgb(200,200,200); " ><br>
 <li><a href="#" onclick="$('#ul_22, #ul_23').hide(); $('#ul_21').slideToggle();return false">Первый пункт</a>
    <ul id="ul_21">
    <li>Первый подпункт</li>
    <li>Второй подпункт</li>
    <li>Третий подпункт</li>
    </ul>
 </li>
 <li ><a href="#" onclick="$('#ul_21, #ul_23').hide(); $('#ul_22').slideToggle();return false">Второй пункт</a>
 <ul id="ul_22">
    <li>Первый подпункт</li>
    <li>Второй подпункт</li>
    <li>Третий подпункт</li>
    </ul>
 </li>
 <li ><a href="#" onclick="$('#ul_22, #ul_21').hide(); $('#ul_23').slideToggle();return false">Третий пункт</a>
 <ul id="ul_23">
    <li>Первый подпункт</li>
    <li>Второй подпункт</li>
    <li>Третий подпункт</li>
    </ul>
 </li><br>
 </ol>
 </div>