Подменю jQuery slideDown и slideUp - PullRequest
Новая
       12

Подменю jQuery slideDown и slideUp

0 голосов
/ 06 марта 2012

У меня небольшая проблема с функциями jQuery slideUp и slideDown.

jsBin Demo

У меня есть вертикальное меню с вертикальным подменю.

Когда пользователь входит в пункт меню, у которого есть подменю, он должен показать его. Это часть, которая работает.

Когда пользователь покидает пункт меню и переходит к пункту подменю, он все равно должен быть виден. Эту проблему я пытался уловить с помощью функции setTimeout, которая удалит (slideUp) подменю через 1500 мс. Если пользователь переместит свою мышь в подменю в это время, setTimeout будет очищен (clearTimeout)

Но когда пользователь быстро наводит указатель мыши на пункты главного меню, отображаются все подменю, а содержимое оригинальной страницы будет перемещено вниз.

Изображение: http://i43.tinypic.com/5ww8yq.png

Это когда я очень быстро перемещаю мышь по всем пунктам главного меню.

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

#menu
{
        background-color: white;
        width: 1000px;
        margin-top: 10px;
        height: 30px;
        position: relative;
}
#menu ul li
{
        float: left;
        display: inline;
        width: 125px;
        height: 30px;
        line-height: 30px;
        text-align: center;
}
#menu ul li.right { float: right; }
#menu ul li a
{
        top: 5px !important;
        text-decoration: none;
        font-size: 20px;
        height: 30px;
        color: #01224D;
}
.submenu
{

        background-color: #01224D;
        width: 1000px;
        height: 30px;
        color: white;
        display: none;
}
.submenu ul li
{
        display: inline;
        width: 100px;
        height: 30px;
        line-height: 30px;
        float: left;
        text-align: center;
}
.submenu ul li.right { float: right; }
.submenu ul li a
{
        text-decoration: none;
        font-size: 20px;
        height: 30px;
        color: white;
}

HTML: 

<div id="menu">
        <ul>
                <li><a href="index.php">Home</a></li>
                <li>
                        <a class="mainMenuA" id="menu-1" href="#">Lederwaren</a>
                </li>
                <li><a class="mainMenuA" id="menu-2"  href="#">Tassen</a></li>
                <li><a class="mainMenuA" id="menu-3"  href="#">Koffers</a></li>
                <li><a class="mainMenuA" id="menu-4"  href="#">Kleding</a></li>
                <li><a class="mainMenuA" id="menu-5"  href="#">Accessoires</a></li>
                <li class="right"><a href="vestigingen.php">Vestigingen</a></li>
        </ul>
</div><!-- menu-->
<div class="submenu" id='submenu-1'>
        <ul>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-2'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-3'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-4'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->
<div class="submenu" id='submenu-5'>
        <ul>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
                <li><a href="#">Submenu</a></li>
        </ul>
</div><!-- submenu -->

JS: 

$(document).ready(function(){ 
                var timer;
                var hover;
                $('.mainMenuA').hover(
                    function()
                    {
                        var id = $(this).attr('id').split('-')[1];
                        $('#submenu-'+id).slideDown();
                    },
                    function()
                    {
                        var id = $(this).attr('id').split('-')[1];
                        timer = setTimeout(function() { $('#submenu-'+id).slideUp(); },1500);
                    }
                );
                $('.submenu').hover(
                    function()
                    {
                        clearTimeout(timer);
                    },
                    function()
                    {
                        var id = $(this).attr('id');
                        timer = setTimeout(function() { $('#'+id).slideUp(); },1500);
                    }
                );
            });

Надеюсь, кто-нибудь сможет мне помочь.

Ответы [ 4 ]

0 голосов
/ 06 марта 2012

ну, не уверен, открыты ли вы для этого решения или нет, но я бы посоветовал вам внести некоторые изменения в HTML, а также потому, что вы в любом случае создаете подменю div, и если я правильно понял ваш вопрос, то вы не хотитесодержимое страницы для перемещения, т. е. у вас может быть выделена конкретная высота для подменю под главным меню (которое должно быть 30 пикселей в вашем случае).

Вот решение, которое я бы предложил, и надеюсь, что оно поможет вам,

HTML: 

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>DEMO</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>



     <div id="menu">
            <ul>
                    <li><a href="index.php">Home</a></li>
                    <li class="mainMenuA">
                            <a id="menu-1" href="#">Lederwaren</a>
                            <div class="submenu" id='submenu-1'>
                                    <ul>
                                            <li><a href="#">Submenu</a></li>
                                    </ul>
                            </div><!-- submenu -->
                    </li>
                    <li class="mainMenuA">
                        <a id="menu-2"  href="#">Tassen</a>
                        <div class="submenu" id='submenu-2'>
                                <ul>
                                        <li><a href="#">Submenu</a></li>
                                        <li><a href="#">Submenu</a></li>
                                </ul>
                        </div><!-- submenu -->
                    </li>
                    <li class="mainMenuA">
                        <a id="menu-3"  href="#">Koffers</a>
                        <div class="submenu" id='submenu-3'>
                                <ul>
                                        <li><a href="#">Submenu</a></li>
                                        <li><a href="#">Submenu</a></li>
                                        <li><a href="#">Submenu</a></li>
                                </ul>
                        </div><!-- submenu -->
                    </li>
                    <li class="mainMenuA">
                        <a id="menu-4"  href="#">Kleding</a>
                        <div class="submenu" id='submenu-4'>
                                <ul>
                                        <li><a href="#">Submenu</a></li>
                                        <li><a href="#">Submenu</a></li>
                                        <li><a href="#">Submenu</a></li>
                                        <li><a href="#">Submenu</a></li>
                                </ul>
                        </div><!-- submenu -->
                    </li>
                    <li class="mainMenuA">
                        <a id="menu-5"  href="#">Accessoires</a>
                        <div class="submenu" id='submenu-5'>
                                <ul>
                                        <li><a href="#">Submenu</a></li>
                                        <li><a href="#">Submenu</a></li>
                                        <li><a href="#">Submenu</a></li>
                                        <li><a href="#">Submenu</a></li>
                                        <li><a href="#">Submenu</a></li>
                                </ul>
                        </div><!-- submenu -->
                    </li>
                    <li class="right"><a href="vestigingen.php">Vestigingen</a></li>
            </ul>
    </div><!-- menu-->

</body>
</html>

CSS: 

article, aside, figure, footer, header, hgroup, 
      menu, nav, section { display: block; }
      #menu
    {
            background-color: white;
            width: 1000px;
            margin-top: 10px;
            height: 30px;
            position: relative;
    }
    #menu ul li
    {
            float: left;
            display: inline;
            width: 125px;
            height: 30px;
            line-height: 30px;
            text-align: center;
    }
    #menu ul li.right { float: right; }
    #menu ul li a
    {
            top: 5px !important;
            text-decoration: none;
            font-size: 20px;
            height: 30px;
            color: #01224D;
    }
    .submenu
    {

            background-color: #01224D;
            width: 1000px;
            /*height: 30px;*/
            color: white;
            display: none;
            position: absolute;
            left: 0;
    }
    .submenu ul li
    {
            display: inline;
            width: 100px;
            /*height: 30px;*/
            line-height: 30px;
            float: left;
            text-align: center;
    }
    .submenu ul li.right { float: right; }
    .submenu ul li a
    {
            text-decoration: none;
            font-size: 20px;
            /*height: 30px;*/
            color: white !important;
    }

JS: 

$(document).ready(function(){ 
    var openSubMenu;
    $('.mainMenuA').hover(function(){
          openSubMenu = $('.submenu', $(this));
          openSubMenu.css({height: '30px'});
          openSubMenu.stop().slideDown();

    },function(){
          openSubMenu.stop().slideUp();
    });
});

Примечание. Я создал подраздел подменю внутриэлемент 'li', так что нам не нужно записывать событие hover в подменю div.Я назначаю события при наведении на сам элемент 'li', я также назначаю высоту подменю перед slideDown, чтобы избежать условий гонки в анимации

Вот рабочий пример http://jsbin.com/odegik/4/edit

0 голосов
/ 06 марта 2012

Когда вы показываете подменю, добавьте к нему class как submenu-open, это будет использоваться для поиска и скрытия его при необходимости.
Код для функции при наведении: 

$('.submenu-open').stop().hide().removeClass('submenu-open');
var id = $(this).attr('id').split('-')[1];
$('#submenu-'+id).addClass('submenu-open').slideDown();

Это должно легко решить вашу проблему, протестируйте ее в демоверсии jsBin!

0 голосов
/ 06 марта 2012

Вместо использования таймера используйте функцию stop для остановки текущего анимации

http://api.jquery.com/stop/

например: 

$('.mainMenuA').hover(function(){
      var id = $(this).attr('id').split('-')[1];
      $('#submenu-'+id).stop().slideDown();
},function(){
      var id = $(this).attr('id').split('-')[1];
      $('#submenu-'+id).stop().slideUp();
});

Используйте параметры stopесли нужно для лучшего результата.

0 голосов
/ 06 марта 2012

Вам просто нужно скрыть все отображаемые элементы .submenu, прежде чем показывать новый.Я пробовал 2 разных метода - используя hide () и slideUp ().Лично я предпочитаю метод slideUp (), как показано в этом jsfiddle ....

http://jsfiddle.net/DgqS4/

...