Форум

cardsmoney · #1 (**permalink**) 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).siblings('ul.children').slideUp('slow');
      });
      </script>

ну и

Код:

    ul.children{
    display:none
    }

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

помогите исправить..

ksa · #2 (**permalink**) 03.11.2010, 11:26

Сообщение от cardsmoney

Пишу код

Как вариант, без кода... ЦСС онли...

<!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 · #3 (**permalink**) 03.11.2010, 11:53

мне нужно чтобы не при наведиении было, а "нажали-и осталось"

ksa · #4 (**permalink**) 03.11.2010, 12:06

От ты ж...

<!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>

Даже с "еще нажали и пропало"...

Gozar · #5 (**permalink**) 03.11.2010, 12:10

удалено.

Gozar · #6 (**permalink**) 03.11.2010, 12:18

удалено.

cardsmoney · #7 (**permalink**) 18.02.2011, 16:20

http://yacoder.ru/archives/88 - вот ответ

Форум

Справочник

Discord чат

Курсы javascript