|
Сообщение от stdm
|
есть древовидный список
...
необходимо сделать его выпадающим
|
Предложу такой вариант...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
ul {
list-style: none;
}
ul ul {
display: none;
}
span {
cursor: pointer;
}
li > span:before {
content: '+ ';
}
li.on > span:before {
content: '- ';
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('span').click(function () {
$(this.parentNode).toggleClass('on');
$(this).next().toggle();
});
});
</script>
</head>
<body>
<ul>
<li><span>Подарки</span>
<ul>
<li><span>Сувенирные изделия</span>
<ul id='h'>
<li>Музыкальные</li>
<li>Шкатулки</li>
<li>Из дерева</li>
<li>Металлические</li>
</ul>
</li>
<li><span>Цветы</span>
<ul>
<li>Букеты</li>
<li>Подарочные цветы</li>
</ul>
</li>
</ul>
</li>
<li><span>Гостинцы</span>
<ul>
<li><span>Леденцы</span>
</li>
<li><span>Пряники</span>
</li>
</li>
</ul>
</body>
</html>