Как исправить скрытие списка?
1. Как сделать, чтобы при клике на дочерний ul список скрывался также, как и при клике вне списка? Например, нажимаем на факториал в "Мат. выч", а список заново открывается. Хочется, чтобы при клике на факториал список не открывался, а открывался заново при нажатии на "Мат. выч".
2. Как можно оптимизировать еще код, а то получается немного быдловато? http://jsfiddle.net/foxt4bu4/ 3. Не обязательный пункт, но хочется узнать для себя. Как можно реализовать данный пример на чистом JS, без использования jquery. |
Открывашка 224 для горизонтального меню
makalet,
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
a { text-decoration: none; font-weight: bold; }
#main {
width: 602px;
height: 300px;
border: 1px solid #E0EBEB ;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -301px;
background: #60a839;}
#menu {
padding: 0;
margin: 0;
font-family: Georgia;
}
#menu li {
float: left;
padding: 0;
width: 200px;
position: relative;
transition:background 0.2s ease;
border: 1px solid #333;
border-left: none;
border-right: none;
}
#menu li:hover{
background: #B9D0D0
}
#menu li ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
display: none;
position: absolute;
left: 0;
top: 31px;
background: #E0EBEB;
}
#menu li ul li:hover{
background: #B9D0D0;
cursor: pointer;
}
#menu li ul li {
height: 26px;
margin: 0;
text-align: left;
border: 0;
}
#nav {
position: relative;
width: 100%;
float: left;
background: #E0EBEB;
}
#nav li {
list-style: none;
text-align: center;
}
#nav li a {
display: block;
padding: 0;
border-left: none;
border-right: none;
line-height: 30px;
font-size: 19px;
font-family: Trebuchet MS;
color: #000;
}
.active-menu-item {
background: #B9D0D0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var $blocks = $("#menu ul");
$blocks.each(function(i, elem) {
var $el = $(elem),
$but = $el.prev();
$but.click(function() {
$but.toggleClass("active-menu-item");
$blocks.filter(function(j, el) {
i == j && $(el).slideToggle();
return i != j
}).slideUp().prev().removeClass("active-menu-item");
})
});
$('html').click(function (event) {
if ($(event.target).closest('#nav' ).length) return;
$('.active-menu-item').click()
});
});
</script>
</head>
<body>
<div id="main">
<div id="nav">
<ul id="menu">
<li class="mat">
<a href="#"><span>Мат. вычисления</span></a>
<ul class="mat">
<li id="mat-1">Степень</li>
<li id="mat-2">Факториал</li>
</ul>
</li>
<li class="pl">
<a href="#"><span>Площадь</span></a>
<ul>
<li id="pl-1">Треугольник</li>
<li id="pl-2">Квадрат</li>
<li id="pl-3">Прямоугольник</li>
<li id="pl-4">Эллипс</li>
<li id="pl-5">Ромб</li>
</ul>
</li>
<li class="ob">
<a href="#"><span>Объем</span></a>
<ul>
<li id="ob-1">Куб</li>
<li id="ob-2">Конус</li>
<li id="ob-3">Пирамида</li>
<li id="ob-4">Параллелепипед</li>
<li id="ob-5">Цилиндр</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
|
Цитата:
|
рони, уух, выше код, конечно, для меня сложноват(
Но вся та же проблема у вас. Я нажимаю на "Факториал" - список не сворачивается, хотя должен. Так должно работать не только при нажатии на "факториал", а на "Степень, круг и т.д" |
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
a { text-decoration: none; font-weight: bold; }
#main {
width: 602px;
height: 300px;
border: 1px solid #E0EBEB ;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -301px;
background: #60a839;}
#menu {
padding: 0;
margin: 0;
font-family: Georgia;
}
#menu li {
float: left;
padding: 0;
width: 200px;
position: relative;
transition:background 0.2s ease;
border: 1px solid #333;
border-left: none;
border-right: none;
}
#menu li:hover{
background: #B9D0D0
}
#menu li ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
display: none;
position: absolute;
left: 0;
top: 31px;
background: #E0EBEB;
}
#menu li ul li:hover{
background: #B9D0D0;
cursor: pointer;
}
#menu li ul li {
height: 26px;
margin: 0;
text-align: left;
border: 0;
}
#nav {
position: relative;
width: 100%;
float: left;
background: #E0EBEB;
}
#nav li {
list-style: none;
text-align: center;
}
#nav li a {
display: block;
padding: 0;
border-left: none;
border-right: none;
line-height: 30px;
font-size: 19px;
font-family: Trebuchet MS;
color: #000;
}
.active-menu-item {
background: #B9D0D0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var $blocks = $("#menu li");
$blocks.each(function(i, elem) {
var $el = $(elem),
$ul = $("ul", $el);
$el.click(function(event) {
$blocks.each(function(j, el) {
$(event.target).closest($ul).length || i != j ? $("ul", el).slideUp().prev().removeClass("active-menu-item") : $("ul", el).slideToggle().prev().toggleClass("active-menu-item")
})
})
});
$("html").click(function(event) {
if ($(event.target).closest("#nav").length) return;
$("ul", $blocks).slideUp().prev().removeClass("active-menu-item")
})
});
</script>
</head>
<body>
<div id="main">
<div id="nav">
<ul id="menu">
<li class="mat">
<a href="#"><span>Мат. вычисления</span></a>
<ul class="mat">
<li id="mat-1">Степень</li>
<li id="mat-2">Факториал</li>
</ul>
</li>
<li class="pl">
<a href="#"><span>Площадь</span></a>
<ul>
<li id="pl-1">Треугольник</li>
<li id="pl-2">Квадрат</li>
<li id="pl-3">Прямоугольник</li>
<li id="pl-4">Эллипс</li>
<li id="pl-5">Ромб</li>
</ul>
</li>
<li class="ob">
<a href="#"><span>Объем</span></a>
<ul>
<li id="ob-1">Куб</li>
<li id="ob-2">Конус</li>
<li id="ob-3">Пирамида</li>
<li id="ob-4">Параллелепипед</li>
<li id="ob-5">Цилиндр</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
|
рони, да. А мой вариант настолько убог, что нельзя его подправить, сделав функционал как у вас в последнем варианте со списком и предыдущем, когда мы нажимали на "Площадь, Мат. Выч", то появлялось выделение, т.е. активным он был.
|
makalet,
смотрите 5 пост снова |
рони, спасибо. Так что скажете на счет моего варианта? Очень и очень плохо?
|
makalet,
вместо трёх классов для li может 1 использовать ? блоки же функционально одинаковы |
| Часовой пояс GMT +3, время: 21:28. |