Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Упростить код с помощью цикла (https://javascript.ru/forum/dom-window/55993-uprostit-kod-s-pomoshhyu-cikla.html)

Vadim7423 24.05.2015 22:42

Упростить код с помощью цикла
 
Добрый вечер, помогите с кодом:
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

Vadim7423,
1.ваше меню не может состоять только из седьмых li.
почему так, читать тут
http://javascript.ru/basic/closure#p...-ispolzovaniya
2.
Цитата:

Сообщение от Vadim7423
"display":"blcok"

нет такой буквы
3.
Цитата:

Сообщение от Vadim7423
пытаюсь использовать цикл

цикл в jquery, чтоб не заморачиваться с пунктом 1. называется each


: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);
             }
     })
 });

Vadim7423 24.05.2015 23:23

рони,
Цитата:

(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

Цитата:

Сообщение от Vadim7423
подменю открывается, но не исчезает

сделайте нормальный макет

Vadim7423 24.05.2015 23:42

Цитата:

Сообщение от рони (Сообщение 372164)
сделайте нормальный макет

не представляется возможным, есть задание использовать именно такое меню и такой макет

рони 24.05.2015 23:56

Цитата:

Сообщение от Vadim7423
не представляется возможным,

css
jquery
script
id="menu"
30 строк условно, у вас что рука отсохнет их на форум скопировать?

рони 25.05.2015 00:08

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>

ruslan_mart 25.05.2015 08:04

Возможно Вас устроит моё меню на CSS: http://javascript.ru/forum/project/5...yu-na-css.html

Vadim7423 25.05.2015 16:00

Цитата:

Сообщение от рони (Сообщение 372168)
css
jquery
script
id="menu"
30 строк условно, у вас что рука отсохнет их на форум скопировать?

Не понял вопроса, извиняюсь. А так благодарю за помощь

kostyanet 26.05.2015 08:25

Бесконечно-уровневое меню делается на css без скриптов вообще. Разумеется кто-то должен сгенерить его хтмл из дерева.


Часовой пояс GMT +3, время: 06:46.