не работает toggle
Здравствуйте? подскажите пожалуйста почему при клике на ссылку первый раз после загрузки страницы не вызывается функция обработчик события после завершения саой toggle? проще говоря почему с первого раза не меняется тип иконки?
ul class="list-group submenu"> <li class="list-group-item ">Lorem ipsum <a href="#" class="toggle-sub-menu" > <i class="glyphicon glyphicon-plus-sign "></i></a> <ul class="my-submenu" id="sub1" > <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> </ul> </li> <li class="list-group-item"><a href="/donec/">Donec tincidunt laoreet</a></li> <li class="list-group-item"><a href="/vestibulum/">Vestibulum elit</a></li> <li class="list-group-item"><a href="/etiam/">Etiam pharetra</a></li> <li class="list-group-item"><a href="/phasellus/">Phasellus placerat</a></li> <li class="list-group-item"><a href="/cras/">Cras et nisi vitae odio</a></li> <li class="list-group-item ">Lorem ipsum <a href="#" class="toggle-sub-menu" > <i class="glyphicon glyphicon-plus-sign pull-right"></i></a> <ul class="my-submenu" id="sub2"> <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> </ul> </li> </ul> <script> $(document).ready(function(){ $(".toggle-sub-menu").click(function(){ var cont = '#'+$(this).next().attr("id"); $(cont).slideToggle("slow",function() { var className = $(cont).prev().children('i').attr("class"); if (className=='glyphicon glyphicon-plus-sign') { className ='glyphicon glyphicon-minus-sign' } else { className='glyphicon glyphicon-plus-sign' } $(cont).prev().children('i').attr("class",className); }); }); }); </script> |
Moloch,
потому что условие составлено неверно -- такие сравнения делаются не через == а через != потому что находится на самом деле неизвестно пока туда не прописали скриптом. if (className != 'glyphicon glyphicon-minus-sign') { className ='glyphicon glyphicon-minus-sign' } |
спасибо, буду знать!
|
Открывашка 208
Moloch,
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .glyphicon-plus-sign::after { content: '+' } .glyphicon-minus-sign::after { content: '-' } .toggle-sub-menu { text-decoration: none } .toggle-sub-menu + ul{ display: none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ $(".toggle-sub-menu").click(function(){ var cont = $(this).next(); var i = $('i' , this) cont.slideToggle("slow",function() { i.toggleClass('glyphicon-plus-sign glyphicon-minus-sign') }); }); }); </script> </head> <body> <ul class="list-group submenu"> <li class="list-group-item ">Lorem ipsum <a href="#" class="toggle-sub-menu" > <i class="glyphicon glyphicon-plus-sign "></i></a> <ul class="my-submenu" id="sub1" > <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> </ul> </li> <li class="list-group-item"><a href="/donec/">Donec tincidunt laoreet</a></li> <li class="list-group-item"><a href="/vestibulum/">Vestibulum elit</a></li> <li class="list-group-item"><a href="/etiam/">Etiam pharetra</a></li> <li class="list-group-item"><a href="/phasellus/">Phasellus placerat</a></li> <li class="list-group-item"><a href="/cras/">Cras et nisi vitae odio</a></li> <li class="list-group-item ">Lorem ipsum <a href="#" class="toggle-sub-menu" > <i class="glyphicon glyphicon-plus-sign pull-right"></i></a> <ul class="my-submenu" id="sub2"> <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> <li><a href="">proof1</a></li> </ul> </li> </ul> </body> </html> |
Часовой пояс GMT +3, время: 20:55. |