javascript - 如何消除子导航重叠？

Question

我正在尝试创建一个子导航。现在我有两个子导航。当我将鼠标悬停在主菜单上的第一个项目上时，会出现相应的子菜单。但是，当我将鼠标悬停在第二个项目上时，第二个子导航出现在第一个项目上方。我该如何编写代码才能避免这种情况发生？

网址:http://arabic001.com

$(document).ready(function() {

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

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


         $('#arbNavText02').mouseover(function()  {
            $('#subNav02').show('slow');
        });

        $('#subNav02').mouseleave(function() {
            $('#subNav02').hide('slow');
        }); 



        })

我刚刚尝试了斯科特的以下建议，但无法在悬停时显示和隐藏子菜单。关于如何解决这个问题有什么想法吗？这是我的新代码:

html

<div id="menu01" class="menu_item">
            <div id="engNavText01">Alphabet</div>
            <div id="arbNavText01">الأحرف</div>
            <div id="subNav01" style="display:none;">
                <a href="colors" class="subNav">
                    <span style="font-size:26px; cursor:pointer;">قراءة</span</a>
                    <br>reading<br><br>
        </div>
        </div>

        <div id="menu02" class="menu_item">
            <div id="engNavText02">Numbers</div>
            <div id="arbNavText02">الأحرف</div>
            <div id="subNav02" style="display: none; ">
                <a href="colors" class="subNav">
                    <span style="font-size:26px; cursor:pointer;">قراءة</span</a>
                    <br>reading<br><br>
        </div>
        </div>

和 JS

$(document).ready(function() {

$('.menu_item').children().hover(
function(){
    $subNav = $(this).parents('menu_item').children("div[id^='subNav'");
    if ($subNav.css('display', 'none')){
        $subNav.show('slow');
    }
},
function(){
    $(this).parents('menu_item').children("div[id^='subNav'").hide('slow');
});

})

Answer 1

您已经创建了 mouseleave 事件，但仅将其附加到子菜单。因此，为了使菜单消失，用户必须将鼠标悬停在子菜单上，然后移出。您可以通过在打开新子菜单之前隐藏其他子菜单来实现您想要的目的。因此，保持 mouseleave 事件不变，您可以将 2 个 mouseover 事件修改为:

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

编辑评论: 当我最初查看您的页面时，我正在考虑这一点。我认为如果你在 html 中使用稍微不同的结构，这是可以完成的。现在，您的菜单 div 在结构上彼此之间没有明显的相关性，因此可以添加一个包含与每个菜单项关联的 3 个元素的 div。

我要提出一个想法，它甚至可能行不通，更不用说是最好的方法了。

<div id="menu01" class="menu_item">
    <div id="engNavText01">Alphabet</div>
    <div id="arbNavText01">الأحرف</div>
    <div id="subNav01" style="display: none; ">
        <a href="colors" class="subNav"><span style="font-size:26px; cursor:pointer;">قراءة</span</a>
        <br>reading<br><br>
    </div>
</div>
<div id="menu02" class="menu_item">...

编辑了JS，我想现在可以工作了

$('.menu_item').hover(
    function(){
        $subNav = $(this).children("div[id^='subNav']");
        if ($subNav.css('display', 'none')){
            $subNav.show('slow');
        }
    },
    function(){
        $(this).children("div[id^='subNav']").hide('slow');
    }
);

正在尝试使用 JSFiddle ，那里看起来还不错。可能需要根据您的用途进行一些修改。