Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.07.2013, 08:20
Аватар для _Alex9_
Аспирант
Отправить личное сообщение для _Alex9_ Посмотреть профиль Найти все сообщения от _Alex9_
 
Регистрация: 28.03.2013
Сообщений: 45

Сделать элемент списка видимым по щелчку
Я назначил всем дочерним элементам ul вложенного списка display:none. Как назначить обработчики onclick, по которым они будут делаться видимыми ?
Ответить с цитированием
  #2 (permalink)  
Старый 18.07.2013, 08:34
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

код выложите
Ответить с цитированием
  #3 (permalink)  
Старый 18.07.2013, 09:03
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,154

Сообщение от _Alex9_
Я назначил всем дочерним элементам ul вложенного списка display:none. Как назначить обработчики onclick, по которым они будут делаться видимыми ?
Клацать нужно на чем-то видимом...
Ответить с цитированием
  #4 (permalink)  
Старый 18.07.2013, 09:46
Аватар для _Alex9_
Аспирант
Отправить личное сообщение для _Alex9_ Посмотреть профиль Найти все сообщения от _Alex9_
 
Регистрация: 28.03.2013
Сообщений: 45

function main()
{
		workMenu("leftVerticalMenu");			
}

function log(obj)
{
	console.log(obj);
}

function workMenu(id)
{
   var menuContainer=document.getElementById(id).children[0];
   closeListsNodes(menuContainer);     
}

function closeListsNodes(container)
{	
	var object = container.getElementsByTagName("li");
	
	for(var i = 0;i < object.length;i++)
		{
		var need = object[i].getElementsByTagName("ul");
		
		for (var j = 0;j < need.length;j++)
		{
			need[j].style.display = "none";
			need[j].id = i.toString() + j.toString();
			need[j].onclick = function() {hideshow(need[j].id);};
		}
		}	
}

function hideshow(id){
     var need = document.getElementById(id); 
	
	if(need.style.display=='none'){
		need.style.display='block';
	}else{
		need.style.display='none';
		}
		
}

<!DOCTYPE html>
<html>
<head>
<title>Start Page</title>
<script src="engine.js" type="text/javascript"></script>
</head>
<body onload="main();">
<div id="leftVerticalMenu">
	<ul>
	<li>
		<a href="#">item 1</a>
		<ul>
		<li>
		    <a href="#">item 11</a>
			<ul>
				<li>
					<a href="#">item 111</a>
				</li>
				<li>
					<a href="#">item 112</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">item 12</a>
		</li>
		</ul>
	</li>
	<li>
	<a href="#">item 2</a>
		<ul>
		<li>
			<a href="#">item 21</a>
		</li>
		<li>
			<a href="#">item 22</a>
		</li>
		</ul>
	</li>
	</ul>
</div>
</body>
</html>


Тут я назначил обработчики в цикле, но они не добавляются в код html.
Ответить с цитированием
  #5 (permalink)  
Старый 18.07.2013, 10:11
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

так вам событие onclick не на ul надо вешать а на <a href>
Ответить с цитированием
  #6 (permalink)  
Старый 18.07.2013, 11:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

_Alex9_,

<!DOCTYPE html>
<html>
<head>
<title>Start Page</title>
<style type="text/css">
ul ul{
  display: none;
}
</style>
<script>
window.onload = function () {
       var a = document.getElementsByTagName('a')
       for (var i = 0; i < a.length; i++) {
           var ul = a[i].nextElementSibling;
           if (ul && ul.tagName == 'UL')
               a[i].onclick = (function (el) {
                   return function () {
                       el.style.display = el.style.display != 'block' ? 'block' : 'none';
                       return false
                  }
           })(ul)
       };
   }
</script>
</head>
<body >
<div id="leftVerticalMenu">
	<ul>
	<li>
		<a href="#">item 1</a>
		<ul>
		<li>
		    <a href="#">item 11</a>
			<ul>
				<li>
					<a href="#">item 111</a>
				</li>
				<li>
					<a href="#">item 112</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="#">item 12</a>
		</li>
		</ul>
	</li>
	<li>
	<a href="#">item 2</a>
		<ul>
		<li>
			<a href="#">item 21</a>
		</li>
		<li>
			<a href="#">item 22</a>
		</li>
		</ul>
	</li>
	</ul>
</div>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 18.07.2013, 11:30
Аватар для _Alex9_
Аспирант
Отправить личное сообщение для _Alex9_ Посмотреть профиль Найти все сообщения от _Alex9_
 
Регистрация: 28.03.2013
Сообщений: 45

Спасибо. Работает. А для чего после функции в скобках тег - })(ul) ?
Ответить с цитированием
  #8 (permalink)  
Старый 18.07.2013, 11:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Сообщение от _Alex9_
А для чего после функции в скобках тег - })(ul)
чтобы сохранить ссылку на элемент который нужно открыть/закрыть иначе все клики будут открывать последний найденный элемент ul
смотрите Пример ошибочного использования
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите убрать элемент из списка ale19 Общие вопросы Javascript 8 16.04.2011 17:28
Сделать видимым select... Anneta Элементы интерфейса 7 12.01.2011 21:21
Как сделать активный элемент при ховере TicTac Общие вопросы Javascript 25 16.10.2010 22:12
Sortable, два связанных списка. Как один из них сделать неизменяемым? kvecxjo jQuery 1 30.03.2010 03:15
как сделать элемент активным? vvsh Элементы интерфейса 5 06.10.2009 17:05