Jquery显示和隐藏反弹？

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

有人能帮忙吗？ 这是一个演示

您有两个单击处理程序，它们将处理同一事件，后者将再次隐藏.home phone图标元素。您只需删除以下内容：

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

请删除下面的第二次单击事件：

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

只需使用第一次单击事件

请仅尝试：

<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>

---

+1，另外，如果他不想。家庭导航电话在显示/隐藏时跳跃，你可以应用一个浮动：左；您已经为图标添加了切换和slideup，因此首先它将触发切换功能，然后再触发slideup功能，这将关闭div。删除slideup功能。应该这样做。

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

<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>