Jquery slideToggle不停留答案

【问题标题】：Jquery slideToggle not staying downJquery slideToggle不停留
【发布时间】：2013-11-20 00:44:05
【问题描述】：

我正在尝试创建一个子导航，它会在单击位于子导航上方单独 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;
    }
  }
}
}
}

$(document).ready(
function() {
$( ".nav-drop" ).hide();

$( ".click" ).click(function() {
$( ".nav-items" ).slideToggle( "slow" );
});
});

【问题讨论】：

标签： jquery navigation slidetoggle

【解决方案1】：

更改班级名称 $( "click" ) 到 $( ".click" ) 和 $( "nav-items" ) 到 $( ".nav-items" )

$(document).ready(
function() {
$( ".nav-drop" ).hide();

$( ".click" ).click(function() {
$( ".nav-items" ).slideToggle( "slow" );
});
});

【讨论】：

【解决方案2】：

你的类选择器似乎不见了.

$(document).ready(function () {
    $(".nav-drop").hide();

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

jQuery 库似乎也缺少 codepen

演示：CodePen

【讨论】：

这适用于 codepen，但在页面加载时仍然存在本地问题。请参阅上面添加的视频。