Вход

Просмотр полной версии : Выпадающие списки. Помогите подправить код.

cardsmoney
03.11.2010, 10:26
Всем привет!
Такая задачка:

Есть список:



<ul>
<li class="cat-item cat-item-187"><a href="" title="">parent</a>

<ul class="children">
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
</ul>
</li>

<li class="cat-item cat-item-183"><a href="" title="">parent</a>
<ul class="children">
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
</ul>
</li>
</ul>




Мне нужно, чтобы родители были без ссылок, и при нажатии на них выплывали дети.

Пишу код :



<script type="text/javascript">
//удаляем ссылки из родителей
$('ul.children').parent(['li']).find('a:first').css('border', '1px solid #eaeaea').removeAttr('href');
//пытаемся их заставить выплывать
$("document").click(function()
{
$(this).next('ul.children').slideToggle(300).sibli ngs('ul.children').slideUp('slow');
});
</script>



ну и


ul.children{
display:none
}



тоже прописываю..
но почему то не работает..

помогите исправить..
ksa
03.11.2010, 11:26
Пишу код
Как вариант, без кода... ЦСС онли...

<!DOCTYPE html>
<html>
<head>
<style>
li ul {
display: none;
}
li:hover ul {
display: block;
}
</style>
<script>
</script>
</head>
<body onload='Test()'>
<ul>
<li class="cat-item cat-item-187">parent
<ul class="children">
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
</ul>
</li>
<li class="cat-item cat-item-183">parent
<ul class="children">
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
</ul>
</li>
</ul>
</body>
</html>

Но не каждый ИЕ понимает псевдоклассы для элементов отличных от ссылок... :-/
cardsmoney
03.11.2010, 11:53
мне нужно чтобы не при наведиении было, а "нажали-и осталось"
ksa
03.11.2010, 12:06
От ты ж... :lol:


<!DOCTYPE html>
<html>
<head>
<style>
.menu {
cursor: pointer;
}
.off {
display: none;
}
.on {
display: block;
}
</style>
<script>
function Go(Obj) {
var o=Obj.getElementsByTagName('ul')
o[0].className=(o[0].className=='on')? 'off': 'on'
}
</script>
</head>
<body>
<ul>
<li class='menu' onclick='Go(this)'>parent 1
<ul class="off">
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
</ul>
</li>
<li class='menu' onclick='Go(this)'>parent 2
<ul class="off">
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
<li class="cat-item cat-item-140"><a href="" title="">children</a> </li>
</ul>
</li>
</ul>
</body>
</html>


Даже с "еще нажали и пропало"... :dance:
Gozar
03.11.2010, 12:10
удалено.
Gozar
03.11.2010, 12:18
удалено.
cardsmoney
18.02.2011, 16:20
http://yacoder.ru/archives/88 - вот ответ