как я могу удалить перекрытие поднавигации?

Я пытаюсь создать дополнительную навигацию. Прямо сейчас у меня есть два subnav. При наведении курсора на первый пункт главного меню появляется соответствующее подменю. Но когда я навожу указатель мыши на второй элемент, вторая вспомогательная навигация появляется НАД первой. Как написать код, чтобы этого не происходило?

URL: 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');
});

})

javascript navigation jquery hover submenu
person L1900    schedule 12.12.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы создали событие mouseleave, но прикрепили его только к подменю. Таким образом, чтобы меню исчезло, пользователь должен будет навести курсор на подменю, а затем выйти из него. Вы можете добиться того, чего хотите, скрыв другие подменю перед открытием нового. Таким образом, сохраняя события mouseleave в том виде, в каком они у вас есть, вы можете изменить два события mouseover следующим образом:

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

Редактировать для комментария: я думал об этом, когда я пошел и посмотрел на вашу страницу изначально. Я думаю, что если бы вы использовали немного другую структуру в своем html, это можно было бы сделать. Прямо сейчас ваши меню div не имеют четкой структурной связи друг с другом, поэтому, возможно, добавьте div, который может содержать 3 элемента, связанных с каждым пунктом меню.

Я собираюсь выплюнуть идею, она может даже не сработать, не говоря уже о том, чтобы быть лучшим способом.

<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, кажется, все в порядке. Возможно, потребуется некоторая модификация для вашего использования.

person Scott    schedule 12.12.2011
comment
Спасибо. Это отлично работает, за исключением того, что теперь я должен сделать то же самое для остальной части вспомогательной навигации. У меня их восемь, и я не хочу повторяться в коде. Есть ли элегантный способ написать это так, чтобы был класс, например. Где я могу попросить его показывать только одно подменю за раз? - person L1900; 14.12.2011
comment
Я искал способ поместить их в div, как вы предложили в моем html-файле. Спасибо за это улучшение моих кодов. Но коды js не работали. - person L1900; 14.12.2011