Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.10.2014, 14:33
Новичок на форуме
Отправить личное сообщение для anmaro Посмотреть профиль Найти все сообщения от anmaro
 
Регистрация: 23.10.2014
Сообщений: 3

Выпадающий список - почему работает только при двойном клике?
Здравствуйте, Гуру! Помогите разобраться с таким моментом. Ниже - работающий код, который открывает выпадающий список. НО не понимаю почему при первом запуске необходимо дважды кликнуть, чтобы сработало, при повторном клике- все ок.

Вроде как и работает, но не хорошо как-то.

<head>
<style>
  #ol2 {display:none;}
  #ol3 {display:none;}
 </style> 
</head>

 <body>

    <script>

function look(type){
param=document.getElementById(type);
if(param.style.display == "none") param.style.display = "block";
else param.style.display = "none"
}
    </script>
 <ol>
		 <li onclick="look('ol2')">Start-up Services
		 	    <ul id="ol2" style="display: none;">
				  <li> 	1</li>
		  		  <li> 	2</li>
		  		  <li> 	3</li>
		  		  <li> 	4</li>
		  		  <li> 	5</li>
		 	    </ul>
		 </li>
	     <li onclick="look('ol3')"> Regulatory affairs 
                           <ul id="ol3">
		  		<li> 	1</li>
		  		<li> 	2</li>
		  		<li> 	3</li>
		  		<li> 	4</li> 
                           </ul>
            </li> 
 </ol>

 </body>

Последний раз редактировалось anmaro, 23.10.2014 в 14:38.
Ответить с цитированием
  #2 (permalink)  
Старый 23.10.2014, 14:43
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Бивас, тест! (с)

<head>
<style>
  #ol2 {display:none;}
  #ol3 {display:none;}
 </style> 
</head>

 <body>

    <script>

function look(type){
param=document.getElementById(type);
alert(param.style.display);
if(param.style.display == "none") param.style.display = "block";
else param.style.display = "none"
}
    </script>
 <ol>
		 <li onclick="look('ol2')">Start-up Services
		 	    <ul id="ol2" style="display: none;">
				  <li> 	1</li>
		  		  <li> 	2</li>
		  		  <li> 	3</li>
		  		  <li> 	4</li>
		  		  <li> 	5</li>
		 	    </ul>
		 </li>
	     <li onclick="look('ol3')"> Regulatory affairs 
                           <ul id="ol3">
		  		<li> 	1</li>
		  		<li> 	2</li>
		  		<li> 	3</li>
		  		<li> 	4</li> 
                           </ul>
            </li> 
 </ol>

 </body>

anmaro, теперь понял почему?
Ответить с цитированием
  #3 (permalink)  
Старый 23.10.2014, 14:48
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Свойство .style - это то, что находится в атрибуте style, а не стили вообще. Поэтому по клику по ol2 срабатывает с первого раза, у ol3 при первом клике param.style.display == "", потому что у него свойство display не установлено, и исполняется блок else, накатывая display = "none". А дальше всё норм работает.
Ответить с цитированием
  #4 (permalink)  
Старый 23.10.2014, 14:58
Новичок на форуме
Отправить личное сообщение для anmaro Посмотреть профиль Найти все сообщения от anmaro
 
Регистрация: 23.10.2014
Сообщений: 3

<style>
  #ol2 {display:none;}
  #ol3 {display:none;}
 </style>


как это свойство у ol3 "дисплей" не установлено?
Ответить с цитированием
  #5 (permalink)  
Старый 23.10.2014, 15:31
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

anmaro, ты пример мой запускал? Сообщения видел? ХТМЛ сравнивал у списков?
Ответить с цитированием
  #6 (permalink)  
Старый 23.10.2014, 15:43
Новичок на форуме
Отправить личное сообщение для anmaro Посмотреть профиль Найти все сообщения от anmaro
 
Регистрация: 23.10.2014
Сообщений: 3

да, спасибо большое!
Везде прописал display, работает.
Ответить с цитированием
  #7 (permalink)  
Старый 23.10.2014, 15:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от anmaro
Везде прописал display
Достаточно просто изменить условие...

<head>
<style>
  #ol2 {display:none;}
  #ol3 {display:none;}
 </style> 
</head>

 <body>

    <script>

function look(type){
param=document.getElementById(type);
param.style.display = (param.style.display == "block")? 'none':  "block";
}
    </script>
 <ol>
		 <li onclick="look('ol2')">Start-up Services
		 	    <ul id="ol2">
				  <li> 	1</li>
		  		  <li> 	2</li>
		  		  <li> 	3</li>
		  		  <li> 	4</li>
		  		  <li> 	5</li>
		 	    </ul>
		 </li>
	     <li onclick="look('ol3')"> Regulatory affairs 
                           <ul id="ol3">
		  		<li> 	1</li>
		  		<li> 	2</li>
		  		<li> 	3</li>
		  		<li> 	4</li> 
                           </ul>
            </li> 
 </ol>

 </body>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Увеличение картинки при клике - самый простой способ Lagshmivar Firefox/Mozilla 16 23.02.2017 17:03
Почему скрипт работает только в Опере? evgenij-1963 (X)HTML/CSS 6 23.03.2013 17:14
почему скрипт работает только в IE kletka Events/DOM/Window 4 20.01.2013 20:12
Dojo может подгружать информацию из пунктов меню только при клике на выбранный пункт? vlad275 Dojo toolkit 0 30.10.2008 15:56
При первом клике список не раскрывается. lancer Элементы интерфейса 1 30.03.2008 17:24