在執行點擊事件之前顯示彈出窗口

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

謝謝克里斯

Answer 1

為了確保這一點，您可以對代碼執行此操作。

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

Answer 2

我只能從您的代碼中得出的唯一猜測是您可能錯過了一些CSS規則。 請檢查以下內容：是否在CSS中隱藏了彈出元素。

教程的STEP-8

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

這可能會解決您的問題。

編輯

這是一個小提琴，演示了您的代碼。 您的代碼沒有錯誤，但是有一些問題。 一切正常。 您是否添加了JQuery庫。 檢查這個小提琴。

http://jsfiddle.net/9Gfbb/