Как я могу удалить перекрытие subnavigation? - PullRequest
Новая
       33

Как я могу удалить перекрытие subnavigation?

0 голосов
/ 13 декабря 2011

Я пытаюсь создать суб-навигацию.Прямо сейчас у меня есть два 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');
});

})

1 Ответ

2 голосов
/ 13 декабря 2011

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

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

Редактировать для комментария: я думал об этом, когда первоначально зашел и посмотрел вашу страницу.Я думаю, что если бы вы использовали немного другую структуру в своем HTML, это можно было бы сделать.Прямо сейчас ваши элементы меню не имеют четкой структурной связи друг с другом, так что, возможно, добавьте элемент, который может содержать 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 ,там вроде все в порядке.Может потребоваться модификация для вашего использования.

...