Вход

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

anmaro
23.10.2014, 14:33
Здравствуйте, Гуру! Помогите разобраться с таким моментом. Ниже - работающий код, который открывает выпадающий список. НО не понимаю почему при первом запуске необходимо дважды кликнуть, чтобы сработало, при повторном клике- все ок. :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>
ksa
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
23.10.2014, 14:48
Свойство .style - это то, что находится в атрибуте style, а не стили вообще. Поэтому по клику по ol2 срабатывает с первого раза, у ol3 при первом клике param.style.display == "", потому что у него свойство display не установлено, и исполняется блок else, накатывая display = "none". А дальше всё норм работает.
anmaro
23.10.2014, 14:58
<style>
#ol2 {display:none;}
#ol3 {display:none;}
</style>

как это свойство у ol3 "дисплей" не установлено?
ksa
23.10.2014, 15:31
anmaro, ты пример мой запускал? Сообщения видел? ХТМЛ сравнивал у списков?
anmaro
23.10.2014, 15:43
да, спасибо большое!
Везде прописал display, работает.
ksa
23.10.2014, 15:46
Везде прописал 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>