Question

我正在尝试在图像中间的导航栏一侧创建一个放置子菜单。我上传了一个透明框（代表子菜单的bkgd）的图像，并使用了以下代码。

当我将鼠标悬停在导航栏上时，子导航会显示，但在鼠标离开栏后会隐藏。我希望子菜单保持显示，以便用户可以从中进行选择。

$(document).ready(function() {

            $('#arbNavText01').mouseover(function()  {
                $('#subNav01').show('slow');
            });

            $('#arbNavText01').mouseout(function() {
                $('#subNav01').hide('slow');
            }); 
            })

Answer 1

如何让子菜单保持显示？

我会说不要.hide()子菜单，但这似乎很明显。我错过了你想要达到的目标吗？你需要更清楚你的问题。

编辑：好的，我看了一下你的网站，现在我知道你的意思了。但你肯定需要更清楚地提出你的问题。

离开导航栏时，您不应该.hide()子菜单。而是寻找隐藏子菜单的其他触发器。例如：离开子菜单，用鼠标输入另一个导航项，离开导航栏超过x秒而不进入子菜单面板。

Answer 2

如果我理解正确，这就是你想要的：

$( document ).ready(function() {
  $( "#arbNavText01" ).hover(
    // mouse in
    function() {
      // if the sub menu is not visible
      if ( ! $( "#subNav01" ).is( ":visible" ) ) {
        // make it visible
        $( "#subNav01" ).show( "slow" );
      };
    },
    // mouse out
    function() {
      // you can also hide it when mouse is out of "arbNavText01"
      // if not, comment the next 3 lines of code
      if ( $( "#subNav01" ).is( ":visible" ) ) {
        $( "#subNav01" ).hide( "slow" );
      };
    }
  );
});

如何使子菜单保持显示以便用户可以从中进行选择？

2 个答案: