Упростить код с помощью цикла
Добрый вечер, помогите с кодом:
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); }); } Что не так делаю? |
Vadim7423,
1.ваше меню не может состоять только из седьмых li. почему так, читать тут http://javascript.ru/basic/closure#p...-ispolzovaniya 2. Цитата:
3. Цитата:
:write: $(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); } }) }); |
рони,
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
jquery script id="menu" 30 строк условно, у вас что рука отсохнет их на форум скопировать? |
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> |
Возможно Вас устроит моё меню на CSS: http://javascript.ru/forum/project/5...yu-na-css.html
|
Цитата:
|
Бесконечно-уровневое меню делается на css без скриптов вообще. Разумеется кто-то должен сгенерить его хтмл из дерева.
|
Часовой пояс GMT +3, время: 06:46. |