Question

我正在尝试使用鼠标悬停动画下拉菜单，我无法得到它，如果我从标签移动鼠标，则下拉列表不应该是可见的。我点击下拉列表中的链接应该是指定的链接。以下是我的代码：

$("#newOne").mouseover(function() {
  $("#newOneMenu").slideDown("slow")

});

$(".tab-body").click(function() {
  $("#newOneMenu").slideUp("slow")

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-body">
  <ul class="tabs">
    <li class="newOne" style=" width:10%">
      <input type="radio" checked name="tabs" id="tab1">
      <label id="newOne" for="tab1">January <span> <img   src="img/nav_arrow.png"   border="0" style="vertical-align:middle;"/></span> 
      </label>
      <div id="newOneMenu" style="width: 133px; height: 100px; display:none;background-color: #f5fbfe;position: absolute; z-index: 9999;left: 3px;">
        <table width="100%" style="margin-top:2px;" cellpadding="3">
          <tr>
            <td style="height:25px;">
              <div class="moreactions-16">New</div>
            </td>
          </tr>
          <tr>
            <td style="height:25px;">
              <div class="moreactions-16">Listing</div>
            </td>
          </tr>
        </table>
      </div>
      <div id="tab-content1" class="tab-content animated fadeIn" style=" height:400px;">
        <div style="width:95%; height:200px; float:left;">
          <ul class="tabsSub">
            <li id="products_details_tab">
              <input type="radio" name="tabsSub" checked id="tabsSub2">
              <div style="color:#0088cc; font-size:14px; font-weight:bold; padding:0 0 5px 0;">January</div>
              <div id="tabsSub-content2" style="display:block; ">
                <h4>Januaray 1st week</h4>
                <div class="frm">
                  <div>
                    <div class="firstDiv">
                      <label>Winter</label>
                      <div>
                        <input type="text" style="width:95%;" />
                      </div>
                    </div>
                    <div class="firstDiv">
                      <label>Monsoon</label>
                      <div>
                        <input type="text" style="width:95%;" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li>
      <input type="radio" name="tabs" id="tab2">
      <label for="tab2">Feburary</label>
      <div id="tab-content3" class="tab-content animated fadeIn" style="height:400px;">
        <div style="width:95%; height:200px; float:left;">
          <ul class="tabsSub">
            <li>
              <input type="radio" name="tabsSub3" checked id="tabsSub3">
              <div id="tabsSub-content3" style="display:block; ">
                <h4></i>Seasons </h4>
                <div class="frm">
                  <div>
                    <div class="firstDiv">
                      <label>Winter</label>
                      <div>
                        <input type="text" style="width:95%;" />
                      </div>
                    </div>
                    <div class="firstDiv">
                      <label>Monsoon</label>
                      <div>
                        <input type="text" style="width:95%;" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 1

当鼠标离开使用jQuery 2.1.3的选项卡时，以下处理程序将向上滑动菜单。看来有些旧版本的jQuery在调用stop()时没有正确停止动画，所以如果依赖于旧版本的jQuery，那么这将不起作用。

$("#newOne").mouseout(function () {
    $("#newOneMenu").stop().slideUp("slow")
});

然后你可以再添加两个处理程序，这样当鼠标在菜单上时它不会向上滑动，并且会在mouseout上向上滑动。

$("#newOneMenu").mouseover(function () {
    $("#newOneMenu").stop().slideDown("slow")
});

$("#newOneMenu").mouseout(function () {
    $("#newOneMenu").stop().slideUp("slow")
});

请注意使用stop()功能 - 您需要将其添加到其他功能中，否则如果用户移动，您最终可能会以延迟的方式上下移动菜单鼠标翻转/翻出/翻转/翻出。

Answer 2

$("#newOne").mouseover(function() {
  $("#newOneMenu").stop().slideDown("slow")

});

$("#newOne").mouseout(function() {
  $("#newOneMenu").stop().slideUp("slow")

});

onmouse悬停下拉列表

2 个答案: