Решил сделать самодельный toggle-переключатель. Смысл его прост:
при клике на div скрывается следующий, при повторном клике следующий появляется.
Соответственно составил две части кода для первого и второго действия. Но первое действие выполняется, а второе нет.
Интересует причина такого поведения jQuery!
Код:
<head>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<style type="text/css">
.bold.show-hide {height: 30px; background: #008000;}
.bold.show-hide-on {background: #00F;}
.big {height: 30px; background: #F00;}
</style>
<script type="text/javascript">
$( document ).ready(function() {
//part1
jQuery(".bold.show-hide").click(function() {
jQuery(this).addClass("show-hide-on");
jQuery(this).next().css("display", "none");
});
//part2
jQuery(".bold.show-hide-on").click(function() {
jQuery(this).removeClass("show-hide-on");
jQuery(this).next().css("display", "block");
});
});
</script>
</head>
<body>
<div class="bold show-hide"></div>
<div class="big"></div>
</body>
Для наглядности:
http://codepen.io/seraphzz/pen/AFxHc