не работает 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, время: 07:11. |