Javascript-форум - Выпадающий список - почему работает только при двойном клике?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Выпадающий список - почему работает только при двойном клике? (https://javascript.ru/forum/misc/51071-vypadayushhijj-spisok-pochemu-rabotaet-tolko-pri-dvojjnom-klike.html)

Выпадающий список - почему работает только при двойном клике?

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

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

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

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

<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, теперь понял почему?

Свойство .style - это то, что находится в атрибуте style, а не стили вообще. Поэтому по клику по ol2 срабатывает с первого раза, у ol3 при первом клике param.style.display == "", потому что у него свойство display не установлено, и исполняется блок else, накатывая display = "none". А дальше всё норм работает.

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

как это свойство у ol3 "дисплей" не установлено?

anmaro, ты пример мой запускал? Сообщения видел? ХТМЛ сравнивал у списков?

да, спасибо большое!
Везде прописал display, работает.

Цитата:

Сообщение от 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>