Выпадающее меню
Добрый вечер.нужно сделать выпадающее меню.Опробую находить дочерний классы,но возвращает длину = 0
<ul class = "list-group"> <li class="list-group-item customCursor"> <p class="grey-text">Model</p> <ul class = "list-group list-group-flush menuItem"> <li class="list-group-item submenuItem">BMW</li> <li class="list-group-item submenuItem">Audi</li> </ul> </li> <li class="list-group-item customCursor"> <p class="grey-text">Year</p> <ul class = "list-group list-group-flush menuItem"> <li class="list-group-item submenuItem">2000</li> <li class="list-group-item submenuItem">2001</li> </ul> </li> <li class="list-group-item customCursor"> <p class="grey-text">Exterior color</p> <ul class = "list-group list-group-flush menuItem"> <li class="list-group-item submenuItem">Red</li> <li class="list-group-item submenuItem">Blue</li> </ul> </li> <ul> $('.customCursor').on('click', function(e) { s = $(e).children('.menuItem'); $(s).fadeToggle(800,'linear'); }); В чем может быть проблема?Спасибо! |
SolomonRei,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $('.customCursor').on('click', function(e) { var s = $(this).children('.menuItem'); s.stop().fadeToggle(800,'linear'); }); }); </script> </head> <body> <ul class = "list-group"> <li class="list-group-item customCursor"> <p class="grey-text">Model</p> <ul class = "list-group list-group-flush menuItem"> <li class="list-group-item submenuItem">BMW</li> <li class="list-group-item submenuItem">Audi</li> </ul> </li> <li class="list-group-item customCursor"> <p class="grey-text">Year</p> <ul class = "list-group list-group-flush menuItem"> <li class="list-group-item submenuItem">2000</li> <li class="list-group-item submenuItem">2001</li> </ul> </li> <li class="list-group-item customCursor"> <p class="grey-text">Exterior color</p> <ul class = "list-group list-group-flush menuItem"> <li class="list-group-item submenuItem">Red</li> <li class="list-group-item submenuItem">Blue</li> </ul> </li> </ul> </body> </html> |
Спасибо большое,а если мне надо повесить обработчика нажатия только на текст.Как тогда быть?
<ul class = "list-group"> <li class="list-group-item"> <p class="grey-text mb-0 customCursor">Model</p> <ul class = "list-group list-group-flush menuItem"> <li class="list-group-item submenuItem">BMW</li> <li class="list-group-item submenuItem">Audi</li> </ul> </li> <li class="list-group-item"> <p class="grey-text mb-0 customCursor">Year</p> <ul class = "list-group list-group-flush menuItem"> <li class="list-group-item submenuItem">2000</li> <li class="list-group-item submenuItem">2001</li> </ul> </li> <li class="list-group-item"> <p class="grey-text mb-0 customCursor">Exterior color</p> <ul class = "list-group list-group-flush menuItem"> <li class="list-group-item submenuItem">Red</li> <li class="list-group-item submenuItem">Blue</li> </ul> </li> <ul> Как тогда это сделать компактно? |
SolomonRei,
var s = $(this).next(); |
Часовой пояс GMT +3, время: 06:33. |