Here's a codepen

Question

我目前在ASP.NET工作，在解决此问题时遇到一些麻烦。我有像这样的HTML代码

 <li><a href="#">Rooms</a>
                    <ul>
                        <li><a href="#">Regular</a></li>
                        <li><a href="#">Deluxe</a></li>
                        <li><a href="#">King's</a></li>
                    </ul>
                 </li>

然后当然我希望它在我悬停时像弹出一样。所以我添加了这段代码

 <script type="text/javascript" src="JavaScript/jquery-1.3.2.min.js"> </script>
    <script type="text/javascript">
        function mainmenu() {
            $(" #nav ul ").css({ display: "none" });
            $("#nav li").hover(function () {
                $(this).find('ul:first').css({visibility:"visibile",display:"none"}).show(200);
            }
            , function () {
                $(this).find ('ul:first').css ({visibility:"hidden"});
            })
        }
        $(document).ready(function () {
            mainmenu();
        });
        </script>

第一次将我们悬停在＆＃34; Room＆＃34;链接，但当我在其他地方悬停时，然后将其悬停回＆＃34; Room＆＃34;它没有弹出。帮助

Answer 1

这样的事情？问题是在mouseenter上你设置了display none并且在鼠标离开时没有将显示更改回正常状态。记住visibility != display

Here's a codepen

<div id='nav'>
  <ul>
    <li><a href="#">Rooms</a>
      <ul>
          <li><a href="#">Regular</a></li>
          <li><a href="#">Deluxe</a></li>
          <li><a href="#">King's</a></li>
      </ul>
   </li>
    <li><a href="#">Rooms</a>
      <ul>
          <li><a href="#">Regular</a></li>
          <li><a href="#">Deluxe</a></li>
          <li><a href="#">King's</a></li>
      </ul>
   </li>    
  </ul>
</div>

<强> JS

function mainmenu() {
    $("#nav li ul").css({ display: "none" });
    $("#nav").on('mouseenter mouseleave', 'li', function() {
        $(this).children('ul').fadeToggle("fast");
    });
}
$(document).ready(function () {
    mainmenu();
});

Answer 2

jQuery 1.3.2已超过5年，请更新到最新版本，它似乎可以解决您的问题（它是安全的，通常最好直接从Google加载jQuery，因此您不必在本地存储它）：

直播： http://jsfiddle.net/6ynafsxr/

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    function mainmenu() {
        $(" #nav ul ").css({ display: "none" });
        $("#nav li").hover(function () {
            $(this).find('ul:first').css({visibility:"visibile",display:"none"}).show(200);
        }
        , function () {
            $(this).find ('ul:first').css ({visibility:"hidden"});
        })
    }
    $(document).ready(function () {
        mainmenu();
    });
</script>

另外，为什么不使用CSS呢？难道你不能只是简单地使用“display：block”：悬停状态？有了动画，它看起来像是：

纯CSS版

#nav ul {
  visibility:hidden;
  opacity:0;
  transition: visibility 0s linear 0.5s,opacity 0.5s linear;
}

#nav li:hover ul {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

直播： http://jsfiddle.net/6ynafsxr/1/

[编辑]

完整版：

<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function mainmenu() {

    $("#nav ul").css({ display: "none" }); // you should use CSS for that
    $("#nav li").hover(function () {
        $("ul", this).css({visibility:"visible", display: "none"}).show(200);
        $("ul", this).addClass("test");
    }, function() {
        $("ul", this).css({visibility:"hidden"});
        $("ul", this).removeClass("test");
    })
}
$(document).ready(function () {
    mainmenu();
});
</script>
</head>

<ul id="nav">
  <li><a href="#">Rooms</a>
    <ul>
      <li><a href="#">Regular</a></li>
      <li><a href="#">Deluxe</a></li>
      <li><a href="#">King's</a></li>
    </ul>
  </li>
</ul>

</body>
</html>

基本上你错误地使用了选择器，我仍然强烈建议在这个菜单中使用CSS代替jQuery，因为在这里使用JS看起来有点过分了。

导航栏在jQuery中无法正常工作

2 个答案:

Here's a codepen

纯CSS版

完整版：