Итак, моя проблема в том, что я не могу найти родственника next () вниз к следующему вложенному ul li.когда установлено, чтобы скрыть.Я могу найти его, когда его нелегко скрыть:
Это работает, когда я закомментирую JS и ничего не скрыто: //$(".vertNavigation li ul a ").hide ();
Добавьте эту функцию, чтобы щелкнуть: $ (this) .next (). css ("background", "yellow"). slideToggle ("normal");
Цель состоит в том, чтобы сделать обратное, нажать на КНОПКУ ОДИН, а слайд-даун - вложенный ul и так далее.Что мне здесь не хватает?
КОД HTML:
</head>
<body>
<div class = "vertNavigation">
<ul>
<li><a href="#" id = "button One">BUTTON ONE</a>
<ul>
<li><a href="#">sub menu 1</a>
<li><a href="#">sub menu 2</a>
<li><a href="#">sub menu 3</a>
<li><a href="#">sub menu 4</a>
</ul>
</li>
<li><a href="#" id = "button Two">BUTTON TWO</a>
<ul>
<li><a href="#">sub menu 1</a>
<li><a href="#">sub menu 2</a>
<li><a href="#">sub menu 3</a>
<li><a href="#">sub menu 4</a>
</ul>
</li>
<li><a href="#" id = "button Two">BUTTON THREE</a>
<ul>
<li><a href="#">sub menu 1</a>
<li><a href="#">sub menu 2</a>
<li><a href="#">sub menu 3</a>
<li><a href="#">sub menu 4</a>
</ul>
</li>
<li><a href="#" id = "button Two">BUTTON FOUR</a>
<ul>
<li><a href="#">sub menu 1</a>
<li><a href="#">sub menu 2</a>
<li><a href="#">sub menu 3</a>
<li><a href="#">sub menu 4</a>
</ul>
</li>
</ul>
</div>
</body>
</html>
КОД CSS:
.vertNavigation ul {
list-style-type: none;
padding-left: 0;
margin-lef: 0;
}
.vertNavigation li {
display: inline;
}
.vertNavigation a { /*main menu*/
display: block;
width: 100px;
text-decoration: none;
margin: 2px 0px 2px 0px;
padding: 6px 15px 3px 15px;
background-color: #EAEAEA;
color: #333;
font-size: .8em;
}
.vertNavigation li ul a { /*sub menu*/
text-decoration: none;
border-bottom: solid 1px #333;
border-length: 50px;
margin: 2px 0px 2px 0px;
background-color: #FFF;
color: #333;
}
КОД JS:
google.load("jquery", "1.6.2");
google.setOnLoadCallback(function(){
$(".vertNavigation li ul a").hide();
$(".vertNavigation ul li a").click(function()
{
//$(this).next().slideToggle("normal");
$(this).next().slideDown("normal");
return false;
});
});