Ли не отображается внутри ул

http://jsfiddle.net/eRtP3/Ли не отображается внутри ул

у меня есть меню, внутри ли, есть еще одна улица, при нажатии на литий, который отображается ул. но этот jquery не работает.

$(document).ready(function() { 
    $("#side-nav .sub-menu").click(function() { 
    //slide up all the link lists 
    $("#side-nav ul ul").slideUp(); 
    //slide down the link list below the h3 clicked - only if its closed 
    if (!$(this).next().is(":visible")) { 
     $(this).next().slideDown(); 
    } 
    }) 
})

HTML

<div id="side-nav"> 
    <ul> 
    <li style="border-top: thin #eee solid;" class="sub-menu"> 
     <i class="fa fa-upload fa-lg"></i>Upload 
     <ul> 
     <li><a href="#">Link1</a> 
     </li> 
     <li><a href="#">Link2</a> 
     </li> 
     <li><a href="#">Link3</a> 
     </li> 
     </ul> 
    </li> 
    <li><a href="~/Log/Index"><i class="fa fa-list fa-lg"></i>Log</a> 
    </li> 

    </ul> 
</div>

CSS

#side-nav ul ul { 
display: none; 
    } 
    #side-nav li.active ul { 
display: block; 
    }

источник

2014-02-20 neel

Я сделал небольшой твик к коду, но другая вещь, чтобы помнить при использовании jsfiddle и вы используете JQuery, чтобы включить рамки JQuery библиотеки.

$(document).ready(function() { 
$("#side-nav .sub-menu").click(function() { 
    // if secondary nav is not visible, slide down 
    if (!$('> ul', this).is(":visible")) { 
     $('> ul', this).slideDown(); 
    } else { // else, it is visible so slide up 
     $('> ul', this).slideUp(); 
    } 
}) 
})

источник

2014-02-20 05:44:58 partypete25

Попробуйте

<div id="side-nav"> 
    <ul> 
     <li style="border-top: thin #eee solid;" class="sub-menu"> 
      <!--Use a another wrapper element for the tirgger part--> 
      <span><i class="fa fa-upload fa-lg"></i>Upload</span> 
      <ul> 
       <li><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
      </ul> 
     </li> 
     <li><a href="~/Log/Index"><i class="fa fa-list fa-lg"></i>Log</a></li> 
    </ul> 
</div>

затем

$(document).ready(function() { 
    $("#side-nav .sub-menu > span").click(function() { 
     //slide down the target 
     var $nxt = $(this).next().stop(true).slideDown(); 
     //slide up all other elements 
     $("#side-nav ul ul").not($nxt).stop(true).slideUp(); 
    }) 
})

Демо: Fiddle

источник

2014-02-20 05:40:15

Johny: спасибо. но слайд-шоу не работает – neel

@Parvathiiiii вместо '.slideDown();' use '.slideToggle();' - http://jsfiddle.net/arunpjohny/C4MMA/2/ –

Просто замените

$("#side-nav ul ul").slideUp();

по

$("#side-nav ul ul").slideToggle("slow");

Вот это demo

источник

2014-02-20 05:45:17 iJade

, снова щелкнув по кнопке li, не является укрытие – neel

@Parvathiiiii обновлено .. Посмотреть – iJade

Попробуйте это в вас JQuery код-

$(document).ready(function() { 
    $("#side-nav .sub-menu").click(function() { 
     $("#side-nav ul ul").toggle('slow'); 
     }) 
    })

источник

2014-02-20 05:50:32 Preet

Ли не отображается внутри ул

ответ

Смежные вопросы