Question

我正在尝试创建一个子导航，当点击位于子导航上方的单独div中的链接时，该子导航将向下滑动。目前我正确隐藏了子导航。然而，当点击其中一个链接时，子导航将快速显示几秒钟然后再次隐藏自己。有人可以帮我弄清楚如何让子导航器掉线然后再点击一下吗？

codepen：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");
        return false
    });
});

jQuery库似乎也缺少了codepen

演示：CodePen

Answer 2

更改班级名称 $（“点击”）到$（“。click”）和$（“nav-items”）到$（“。nav-items”）

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

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

Jquery slideToggle没有停留下来

2 个答案: