Javascript-форум - Скрыть подменю

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Скрыть подменю (https://javascript.ru/forum/jquery/53567-skryt-podmenyu.html)

Скрыть подменю

Есть такой мини код
http://jsfiddle.net/bfyfn4k0/
Вопрос: как сделать чтобы при клике на "+" другие открытые подменю скрывались, а текущий соответственно открывался
Спасибо!

Цитата:

Сообщение от 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>

segajb,
:write: ... вариант

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<script src='https://code.jquery.com/jquery-latest.js'></script>
<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;}
.open.active{
  border: #0033FF  2px solid;
}

</style>
<script type='text/javascript'>
$(function() {
    var li = $(".leftmenu li");
    li.each(function(indx, el) {
        $(".open", el).click(function() {
            $(".open").not($(this).toggleClass('active')).removeClass("active");
            $("ul", li).not($("ul", el).slideToggle("slow")).slideUp();
        })
    });
 $(".open", li[0]).click() ; 
});
</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>

+
всем спасибо, то что нужно!

Открыта первая категория

А как реализовать - чтобы первая категория была по умолчанию открыта ?

Цитата:

Сообщение от Alex465

А как реализовать - чтобы первая категория была по умолчанию открыта ?

строка 30 пост №3

Цитата:

Сообщение от рони (Сообщение 433272)

строка 30 пост №3

Весьма Вам благодарен.

Цитата:

Сообщение от рони (Сообщение 433272)

строка 30 пост №3

А как можно сделать так, чтобы при переходе по ссылке пункта меню/подменю меню не полностью закрывалось, а оставались открытыми те пункты, которые были открыты до перехода на другую страницу?

globus812,
если вы про исходный вид меню, то это забота сервера, можно конечно парсить ссылку на клиенте или запоминать нажатия и раскрывать меню, но это к более продвинутым специалистам.