24.05.2015, 22:42
|
|
Новичок на форуме
|
|
Регистрация: 17.02.2015
Сообщений: 5
|
|
|
Упростить код с помощью цикла
Добрый вечер, помогите с кодом:
jQuery(document).ready(function($){
$('#menu > ul > li:nth-child(1)').hover(function(){
$('#menu > ul > li:nth-child(1) > ul').css({"position":"absolute", "display":"blcok", "z-index": "1"}).stop(true, true).slideDown(100);
},
function(){
$('#menu > ul > li:nth-child(1) > ul').stop(true, true).slideUp(100);
});
$('#menu > ul > li:nth-child(3)').hover(function(){
$('#menu > ul > li:nth-child(3) > ul').css({"position":"absolute", "display":"blcok", "z-index": "1"}).stop(true, true).slideDown(100);
},
function(){
$('#menu > ul > li:nth-child(3) > ul').stop(true, true).slideUp(100);
});
})
пытаюсь использовать цикл ничего не получается, код не работает
for(var i = 1; i < = 6; i++){
$('#menu > ul > li:nth-child('+ i +')').hover(function(){
$('#menu > ul > li:nth-child('+ i +') > ul').css({"position":"absolute", "display":"blcok", "z-index": "1"}).stop(true, true).slideDown(100);
},
function(){
$('#menu > ul > li:nth-child('+ i +') > ul').stop(true, true).slideUp(100);
});
}
Что не так делаю?
|
|
24.05.2015, 23:07
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Vadim7423,
1.ваше меню не может состоять только из седьмых li.
почему так, читать тут
http://javascript.ru/basic/closure#p...-ispolzovaniya
2.
|
Сообщение от Vadim7423
|
|
"display":"blcok"
|
нет такой буквы
3.
|
Сообщение от Vadim7423
|
|
пытаюсь использовать цикл
|
цикл в jquery, чтоб не заморачиваться с пунктом 1. называется each
$(function() {
$("#menu > ul > li").each(function(indx, element) {
$(element).hover(function() {
$("> ul", this).css({
"position": "absolute",
"display": "block",
"z-index": "1"
}).stop(true, true).slideDown(100);
}),
function() {
$("> ul", this).stop(true, true).slideUp(100);
}
})
});
|
|
24.05.2015, 23:23
|
|
Новичок на форуме
|
|
Регистрация: 17.02.2015
Сообщений: 5
|
|
рони,
|
Цитата:
|
(function() {
$("#menu > ul > li").each(function(indx, element) {
$(element).hover(function() {
$("> ul", this).css({
"position": "absolute",
"display": "block",
"z-index": "1"
}).stop(true, true).slideDown(100);
}),
function() {
$("> ul", this).stop(true, true).slideUp(100);
}
})
});
|
подменю открывается, но не исчезает
|
|
24.05.2015, 23:35
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Vadim7423
|
|
подменю открывается, но не исчезает
|
сделайте нормальный макет |
|
24.05.2015, 23:42
|
|
Новичок на форуме
|
|
Регистрация: 17.02.2015
Сообщений: 5
|
|
Сообщение от рони
|
|
сделайте нормальный макет
|
не представляется возможным, есть задание использовать именно такое меню и такой макет |
|
24.05.2015, 23:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Vadim7423
|
|
не представляется возможным,
|
css
jquery
script
id="menu"
30 строк условно, у вас что рука отсохнет их на форум скопировать? |
|
25.05.2015, 00:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Vadim7423,
ниже это макет, возьмите из него исправленный скрипт.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#menu > ul > li > ul {
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$("#menu > ul > li").each(function(indx, element) {
$(element).hover(function() {
$("> ul", this).css({
"position": "absolute",
"display": "block",
"z-index": "1"
}).stop(true, true).slideDown(100);
},
function() {
$("> ul", this).stop(true, true).slideUp(100);
})
})
});
</script>
</head>
<body>
<div id="menu">
<ul>
<li>1<ul>
<li>test1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
|
|
25.05.2015, 16:00
|
|
Новичок на форуме
|
|
Регистрация: 17.02.2015
Сообщений: 5
|
|
|
Сообщение от рони
|
css
jquery
script
id="menu"
30 строк условно, у вас что рука отсохнет их на форум скопировать?
|
Не понял вопроса, извиняюсь. А так благодарю за помощь |
|
26.05.2015, 08:25
|
|
Профессор
|
|
Регистрация: 23.10.2010
Сообщений: 2,718
|
|
|
Бесконечно-уровневое меню делается на css без скриптов вообще. Разумеется кто-то должен сгенерить его хтмл из дерева.
|
|
|
|
