jquery - Jquery显示和隐藏反弹？

Question

我有一些 jquery 显示和隐藏，我遇到的问题是它显示时不会停留，它会不断弹回。

有人可以帮忙吗？这是一个演示 http://jsfiddle.net/WqYFV/

$(".home-phone-icon").click(function () {
    $(".home-nav-phone").slideToggle('slow');
})

$(".home-phone-icon").click(function () {
    $(".home-nav-phone").slideUp('slow');
})

Answer 1

您有两个click处理相同事件的处理程序 - 后者将.home-phone-icon再次隐藏元素。您只需要删除它：

$(".home-phone-icon").click(function () {
    $(".home-nav-phone").slideToggle('slow');
});

更新的小提琴

Answer 2

请删除以下第二个click事件：

$(".home-phone-icon").click(function () {
    $(".home-nav-phone").slideUp('slow');
});

并且只使用第一个click事件

$(".home-phone-icon").click(function () {
    $(".home-nav-phone").slideToggle('slow');
});

FIDDLE DEMO

Answer 3

仅尝试：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="javascript">
$(document).ready(function(){
$(".home-phone-icon").click(function () {
    $(".home-nav-phone").slideToggle('slow');
})
});
</script>
<a href="javascript:;" class="home-phone-icon"></a>

<ul class="home-nav-phone">
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
    <li><a href="#">link</a>
    </li>
</ul>
<style type="text/css">
  .home-phone-icon {
      display: block;
      float: right;
      background: red;
      width: 40px;
      height: 40px;
      position: relative;
      top: -30px;
      right: -8px;
  }
  .home-nav-phone {
      z-index: 9999999;
      position: relative;
      width: 100%;
      top: 62px;
      left: 0px;
      display:none;
      margin:0 auto;
      pointer:cursor;
  }
  .home-nav-phone li {
      line-height: 45px;
      background:#2e2e2e;
      text-align: center;
      border-bottom: 1px solid white;
      z-index: 999;
  }
  .home-nav-phone li a {
      color: white;
      font-size: 14px;
      font-weight: bold;
  }
</style>