|
Сообщение от segajb
|
|
как сделать чтобы при клике на "+" другие открытые подменю скрывались, а текущий соответственно открывался
|
Как вариант...
<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.leftmenu li {list-style:none; }
.leftmenu li span {border:1px solid #96b6c6; border-radius:7px; padding:13px 10px 13px 17px; margin-bottom:4px; background:url('../images/head.jpg') no-repeat 0 0; position:relative; display:block;}
.leftmenu li a {color:#363636; text-decoration:none;}
.leftmenu ul ul {display:none;}
.leftmenu .open {position:absolute; width:26px; height:26px; background:url('../images/open.png') no-repeat 0 0; top:9px; right:12px; z-index:140; cursor:pointer; }
.leftmenu .open:hover, .leftmenu .open.active { background:url('../images/open.png') no-repeat -26px 0; }
.leftmenu li li {margin-left:20px;}
.leftmenu li li span {padding-top:10px; padding-bottom:10px;}
.leftmenu li a:hover, .leftmenu li.active>span>a, .leftmenu li li.active a {text-decoration:underline;}
</style>
<script type='text/javascript'>
$(function(){
$(".open").click(function(){
$('.open.active').parent("span").parent("li").children("ul").slideToggle("slow");
var end=$(this).hasClass('active');
$('.leftmenu .open').removeClass("active");
if (!end) {
$(this).parent("span").parent("li").children("ul").slideToggle("slow");
$(this).toggleClass("active");
};
});
});
</script>
</head>
<body>
<div class="leftmenu"> <ul>
<li><span><a href="#">Пункт меню</a><i class="open">+</i></span>
<ul>
<li><span><a href="#">Под пункт меню</a></span></li>
<li><span><a href="#">Под пункт меню</a></span></li>
<li><span><a href="#">Под пункт меню</a></span></li>
<li><span><a href="#">Под пункт меню</a></span></li>
</ul>
</li>
<li><span><a href="#">Пункт меню</a></span></li>
<li><span><a href="#">Пункт меню</a></span></li>
<li><span><a href="#">Пункт меню</a><i class="open">+</i></span>
<ul>
<li><span><a href="#">Под пункт меню</a></span></li>
<li><span><a href="#">Под пункт меню</a></span></li>
<li><span><a href="#">Под пункт меню</a></span></li>
</ul>
</li>
</ul>
</div>
</body>
</html>