Форум

anmaro · #1 (**permalink**) 23.10.2014, 14:33

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

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

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

ksa · #2 (**permalink**) 23.10.2014, 14:43

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

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

Sweet · #3 (**permalink**) 23.10.2014, 14:48

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

anmaro · #4 (**permalink**) 23.10.2014, 14:58

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

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

ksa · #5 (**permalink**) 23.10.2014, 15:31

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

anmaro · #6 (**permalink**) 23.10.2014, 15:43

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

ksa · #7 (**permalink**) 23.10.2014, 15:46

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

Форум

Справочник

Discord чат

Курсы javascript