всплывающее окно отображается перед нажатием на событие-событие

Question

Я попытался использовать пример меню, который я нашел на webdesign.tutsplus.com.

(http://webdesign.tutsplus.com/articles/create-a-quick-sticky-menu--webdesign-12120)

Моя проблема в том, что мое всплывающее окно загружается непосредственно после загрузки страницы - но я просто хочу, чтобы это произошло, когда я нажимаю на одном из моих меню-пунктов.

Я думал, что удаление $(document).ready будет делать трюк - но это не так ...

всплывающих:

<div class="popup"> 
    <div class="arrow"></div> 
     <ul> 
      <li><a href="">List Item 1</a></li> 
      <li><a href="">List Item 2</a></li> 
      <li><a href="">List Item 3</a></li> 
     </ul> 
</div> 

Javascript:

<script type="text/javascript"> 

$(document).ready(
    function(){ 
    $("#support").click(function() { 
     $(".popup").fadeToggle(150); 
     return false; 
    }); 
}); 

</script> 

CSS

div.popup{ 
display: none; 
float: right; 
position: relative; 
left: 5%; 
background-color: #2C3E50; 
-webkit-border-radius: .2em; 
-moz-border-radius: .2em; 
border-radius: .2em; 
} 

div.popup ul li a{ 
position: relative; 
display: inline-block; 
font-size: .85em; 
color: #fff; 
padding: 0 2em 0 2em; 
margin: .4em; 
text-align: center; 
text-decoration: none; 
transition: all 0.1s ease-in-out; 
-webkit-border-radius: .2em; 
-moz-border-radius: .2em; 
border-radius: .2em; 
} 

div.popup ul li a:hover{ 
background-color: #1ABC9C; 
} 

Спасибо, Chris

Answer 1

Единственное, что я могу сделать из вашего кода, - возможно, вы пропустили некоторые правила CSS. Проверьте следующее: скрыл ли вы элемент popup в своем css.

STEP-8 учебника

div.popup{ 
    display: none; 
    /* Other styles */ 
} 

Это может решить вашу проблему.

EDIT

Вот скрипка демонстрирует свой код. У вашего кода нет ошибок, кроме некоторых проблем с привязкой. Все работает нормально. Вы добавили библиотеку JQuery. Проверьте эту скрипку.

http://jsfiddle.net/9Gfbb/

Answer 2

Чтобы быть уверенным, вы можете сделать это с кодом.

$(document).ready(function(){ 
    $(".popup").hide(); // hide the popup in the case, that it wasn't hidden. 
    $("#support").click(function() { 
    $(".popup").fadeToggle(150); 
    return false; 
    }); 
});