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中隐藏了弹出元素。

教程的第8步

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

这可能会解决您的问题。

修改

这是演示您的代码的小提琴。您的代码没有错误，但有一些对齐问题。一切都很好。你添加了JQuery库吗？检查这个小提琴。

http://jsfiddle.net/9Gfbb/

在执行click事件之前显示popup

2 个答案: