Javascript 导航栏在jQuery中工作不正常_Javascript_Jquery_Html

Javascript 导航栏在jQuery中工作不正常

javascript jquery html

Javascript 导航栏在jQuery中工作不正常,javascript,jquery,html,Javascript,Jquery,Html,我目前在ASP.NET中工作，在解决此问题时遇到一些问题。我有这样的HTML代码 <li><a href="#">Rooms</a> <ul> <li><a href="#">Regular</a></li> <li><a href="#">

我目前在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>


功能主菜单（）{
$（“#nav ul”）.css（{display:“none”}）；
$（“#导航li”）。悬停（函数（）{
$（this.find（'ul:first'）.css（{visibility:'visibile'，display:'none}）.show（200）；
}
，函数（）{
$（this.find（'ul:first'）.css（{visibility:“hidden”}）；
})
}
$（文档）.ready（函数（）{
主菜单（）；
});

当我第一次将鼠标悬停在“房间”链接上时，一切正常，但当我将鼠标悬停在其他地方，然后将其悬停回“房间”时，它不会弹出。帮助？

像这样的事？问题在于，在

mouseenter

上，您正在设置

display none

，并且在鼠标离开时不会将显示恢复到正常状态。记住

可见性！=显示

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

现场直播：

[编辑]

完整版本：


功能主菜单（）{
$（“#nav ul”）.css（{display:“none”}）；//您应该使用css来实现这一点
$（“#导航li”）。悬停（函数（）{
$（“ul”，this）.css（{visibility:“visible”，display:“none”}）.show（200）；
$（“ul”，this）.addClass（“test”）；
}，函数（）{
$（“ul”，this）.css（{visibility:“hidden”}）；
$（“ul”，this.removeClass（“test”）；
})
}
$（文档）.ready（函数（）{
主菜单（）；
});

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

jQuery 1.3.2版？！你是在IE 6中运行这段代码吗？不是的，先生，我是在Chrome上运行这段代码的。我的观点是，jQuery 1.3.2是一只5岁以上的恐龙。哦，对不起，我没有收到讽刺的笑声。但是，尽管如此，它仍然困扰着我，为什么1.3.2和2.1.1仍然有相同的结果。我之所以使用1.3.2，是因为它是我的同学给我的版本，我是jquery的新版本：PI没有说新版本的jquery可以解决任何问题，但是对于这么旧的东西，你是在问问题。嗨，先生！谢谢你的努力。当我遵循您的建议和代码时，我注意到了一些事情。我查看了JS的实时版本。结果证明它工作得很好，CSS版本也是如此。但当我应用JS的最新版本2.1.1时，问题仍然是，每当我第二次悬停在它上面时，它都不会出现。另外，我没有在google上加载jquery，因为它对我来说效率不高，因为有时我在学校工作，我们没有Wifi。我明白了，请检查编辑，它应该可以让你继续：）

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

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

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

#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;
}

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