OnClick события с сНом тегом

Question

Я пытался что-то с сНом тэга следующим образом,

<style type="text/css"> 
    #hello{ 
     visibility: visible; 
     cursor: pointer; 
     position: absolute; 
    } 
    #list{ 
     visibility: hidden; 
     cursor: pointer; 
     position: absolute; 
     top: 30px; 
     z-index: 1; 
     background-color: aqua; 
    } 
    #second{ 
      position: absolute; 
    } 
</style> 
<div id="hello" onclick="{if(list.style.visibility=='hidden'){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/> 
     <div id="second">Welcome to smartdata</div> 
     <div id="list"> 
      <a href="index.jsp">Home</a> <br/> 
      <a href="#" onclick="{alert('You are going to signout');}">SignOut</a> <br/> 
     </div> 

Он работает нормально, но проблема в списке не отображается на первый щелчке. Что-то не так с моим кодом.

Answer 1

Ваш код не работает, как вы ожидаете, что из-за способа element.style работ.

Проверить ссылку MDN на element.style: https://developer.mozilla.org/en/DOM/element.style

Поскольку свойство стиля имеет такое же (и самый высокий) приоритет в CSS каскаде в качестве декларации встроенного стиля через атрибут стиля, он является полезно для установки стиля на одном конкретном элементе.

Однако, это не полезно для изучения стиля элемента в целом, так как она представляет собой лишь заявления CSS, установленные в атрибут стиля инлайн в элемента, а не те, которые приходят от стиля правила в других местах, например, стиль правила в разделе, или внешние таблицы стилей.

Так что, когда вы впервые запустить свой код, и даже если ваш element.style.hidden объявлен в CSS листе внешнего, декларация стиля остается пустой, и вам необходимо выполнить дополнительные проверки.

if (!list.style.visibility || list.style.visibility === 'hidden') {...} 

Вы можете взглянуть на скрипке, чтобы увидеть его работу: http://jsfiddle.net/Kk6TJ/1/

также:

1. Это лучше всего использовать тройную равное === выполнить строгое сравнение без преобразования типа переменной ,
2. Вам не нужны фигурные скобки в обработчиках событий. Если бы вы надеялись, что они создадут сферу действия - они этого не сделают! В JavaScript есть только функции.

Answer 2

list.style.visibility=='hidden' ложное заявление на первый щелчок

попробовать этот

{if(list.style.visibility=='hidden' || list.style.visibility='') 

Answer 3

<style type="text/css"> 
    #hello{ 
     visibility: visible; 
     cursor: pointer; 
     position: absolute; 
    } 
    #list{ 
     visibility: hidden; 
     cursor: pointer; 
     position: absolute; 
     top: 30px; 
     z-index: 1; 
     background-color: aqua; 
    } 
    #second{ 
      position: absolute; 
    } 
</style> 
<div id="hello" onclick="{if(list.style.visibility=='hidden' || list.style.visibility==''){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/> 
     <div id="second">Welcome to smartdata</div> 
     <div id="list"> 
      <a href="index.jsp">Home</a> <br/> 
      <a href="#" onclick="{alert('You are going to signout');}">SignOut</a> <br/> 
     </div>​ 

Answer 4

Стили, определенные в тегах стиле и CSS-файлов не в element.style.property собственности, они доступны, если элемент имеет свой набор стилей рядный <element style="property:value;"> или явно element.style.property = value;

Чтобы получить стили для элемента определенные в стиле теги/листы используют окно. getComputedStyle (элемент, null). getPropertyValue (собственность); `

Таким образом, вы можете встраивать стили в списке, используйте getComputedStyle GetPropertyValue или использовать тот факт, что list.style.visibility собирается быть пустым на первом щелчке.

Answer 5

Это потому, что ваш, если ..еще не в порядке. Переупорядочение инструкции решения скорректировало поведение. Теперь первый щелчок показывает пункты меню.

Кроме того, если вы запустите свой скрипт и посмотрите его в консоли firebug, вы увидите, что ваш код javascript бросает предупреждение при первом щелчке.

Я обновил свой код -

 <style type="text/css"> 
    #hello{ 
     visibility: visible; 
     cursor: pointer; 
     position: absolute; 
    } 
    #list{ 
     visibility: hidden; 
     cursor: pointer; 
     position: absolute; 
     top: 30px; 
     z-index: 1; 
     background-color: aqua; 
    } 
    #second{ 
      position: absolute; 
    } 

</style> 

<script type="text/javascript"> 

function Clickme() 
{ 
var list = document.getElementById('list'); 

if(list.style.visibility=='visible') 
{ 
list.style.visibility='hidden'; 
} 
else 
{ 
list.style.visibility='visible' 
} 
} 
</script> 
<div id="hello" onclick="Clickme();">Hello user</div><br/> 
     <div id="second">Welcome to smartdata</div> 
     <div id="list"> 
      <a href="index.jsp">Home</a> <br/> 
      <a href="#" onclick="{alert('You are going to signout');}">SignOut</a> <br/> 
     </div> 

Answer 6

Перейти на что-то вроде этого -

if(list.style.visibility=="visible") 
{ 
    list.style.visibility="hidden"; 
} 
else 
{ 
    list.style.visibility="visible" 
}