Jquery slideToggle not staying down

Question

我正在尝试创建一个子导航，当单击位于子导航上方单独div中的链接时，该子导航将向下滑动。目前，我已将副导航正确隐藏。然而，点击其中一个链接后，子导航将快速显示几秒钟，然后再次隐藏起来。有人能帮我弄清楚如何放下子导航，然后在点击时保持向下吗？

在此处打开代码：http://codepen.io/anon/pen/tkgmx问题视频：http://www.youtube.com/watch?v=DcvIwdleMFY&feature=youtube_gdata_player

html

<div>
        <ul class="top-nav">
            <li class="click"><a href="vision.php">Click here</a></li>
            <li><a href="#">link 2</a></li>
            <li><a href="#">link 3</a></li>
            <span class="arrow-up"></span>
        </ul>
    </div>
<div class="nav-items">
    <div class="drop-container">
        <ul class="sub-nav">
            <li><a href="">nav item 1</a>|</li>
            <li><a href="">nav item 1</a>|</li>
            <li><a href="">nav item 1</a>|</li>
        </ul>
    </div>
</div>

css

 .top-nav {
li {
 display: inline;
 list-style: none;
padding-left: 10px;
a {
  display: inline-block;
 }
}
.arrow-up {
width: 0; 
height: 0; 
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid gray;
position: absolute;
top: 50px;
right: 334px;
}
}

.nav-items {
background-color:gray;  
.drop-container {
.sub-nav {
  list-style: none;
  li {
    display: inline;
    a {
      display: inline-block;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
}
}
}

js

$(document).ready(
function() {
$( ".nav-drop" ).hide();
$( ".click" ).click(function() {
$( ".nav-items" ).slideToggle( "slow" );
});
});

Answer 1

更改类名$（"点击"）到$（".点击"）和$（"导航项目"）到$[".导航项目"]

$(document).ready(
function() {
$( ".nav-drop" ).hide();
$( ".click" ).click(function() {
$( ".nav-items" ).slideToggle( "slow" );
});
});

Answer 2

类选择器似乎缺少.

$(document).ready(function () {
    $(".nav-drop").hide();
    $(".click").click(function () {
        $(".nav-items").slideToggle("slow");
        return false
    });
});

此外，jQuery库似乎缺少代码笔

演示：CodePen