Меню JQuery Drop Down Hover

Я новичок в jQuery, я надеялся, что вы, ребята, можете мне помочь. Я пытаюсь создать раскрывающееся меню парирования, но оно очень плохое. Можете ли вы помочь мне очистить свой Javascript? Посмотрите на мой код.

http://jsdo.it/mretchin/4Ewk

Он не работает на jsdo.it по какой-либо причине, но работает в Komodo Edit.

Попробуйте код самостоятельно, если вы действительно этого хотите, проблема в основном заключается в Javascript. Можете ли вы помочь мне сделать так, чтобы, когда пользователь нависает над img.menu_class, ul.file_menu падает, а затем, если бы я хотел, я мог бы нависнуть над #something в ul, и он выпадал бы горизонтально, а не вертикально.

Спасибо за помощь! Я ценю это!

Должен ли я просто отказаться и заставить его работать в CSS?

Ответы

Ответ 1

Вы можете сделать что-то вроде this:

$(document).ready(function() {
    $(".hoverli").hover(
        function() {
            $('ul.file_menu').stop(true, true).slideDown('medium');
        },
        function() {
            $('ul.file_menu').stop(true, true).slideUp('medium');
        }
    });
});

И здесь пример с подменю:

$(document).ready(function() {
    $(".hoverli").hover(
        function() {
            $('ul.file_menu').slideDown('medium');
        },
        function() {
            $('ul.file_menu').slideUp('medium');
        }
    );

    $(".file_menu li").hover(
        function() {
            $(this).children("ul").slideDown('medium');
        },
        function() {
            $(this).children("ul").slideUp('medium');
        }
    );
});

Ответ 2

Для тех, кто находит это в будущем, ответ Арама может быть сокращен с помощью .slideToggle() для обработки вверх и вниз.

Здесь измененная скрипка

http://jsfiddle.net/4jxph/2009/

Если у вас есть подменю, установленное на display: none;, оно также вызовет его, поэтому вам нужно будет сделать это block, а затем добавить что-то вроде этого

var subMenu = $('li.hoverli > ul > li');

subMenu.hover(function () {
            $(this).find("ul").slideToggle(200);
        });

И разместите его прямо под вашим первым слайдом. Почему бы вам просто не показать вас?

$(document).ready(function () {
    $(".hoverli").hover(function () {
     $(this).find('ul').slideToggle('medium');
    });

    var subMenu = $('li.hoverli > ul > li');

    subMenu.hover(function () {
      $(this).find("ul").slideToggle(200);
    });
});

Ответ 3

Не уверен, если вам все равно, но вы хотите убедиться, что вы запускаете метод .stop() таким образом, чтобы анимация не создавала себя и не запускалась снова и снова. Вот пример

http://jsfiddle.net/4jxph/1335/

$(document).ready(function () {
    $(".hoverli").hover(
  function () {
     $('ul.file_menu').stop(true, true).slideDown('medium');
  }, 
  function () {
     $('ul.file_menu').stop(true,true).slideUp('medium');
  }
);

});

Ответ 4

Используйте функцию завершения в jQuery, чтобы предотвратить ошибку, в которой вы быстро наводите указатель мыши на меню и вне меню. Finish лучше, чем ранее предлагаемая функция остановки.

$(document).ready(
    function () {
        $(".hoverli").hover(
          function () {
             $('ul.file_menu').finish().slideDown('medium');
          }, 
          function () {
             $('ul.file_menu').finish().slideUp('medium');
          }
    );
});

Ответ 5

Ответ Арама Мкртчяна был почти у меня. Проблема с ним заключалась в том, что если вы добавляете что-либо под меню, то оно становится все скверным. Вот пример того, что я имею в виду, я добавил div ниже его меню: http://jsfiddle.net/4jxph/3418/

Я представляю этот обновленный ответ, используя div вместо списков и элементов списка (с которыми я нахожу гораздо проще работать и более гибким) и jQuery версии 1.9.1

здесь ссылка на jFiddle: http://jsfiddle.net/4jxph/3423/

Вот код:

--------------- HTML:

<div id="divMenuWrapper1" class="divMenuWrapper1">
    <div id="hoverli">
        <div class="lbtn">
            Actions
        </div>
        <div id="actions_menu" class="file_menu">
            <div><a href="#file">File</a></div>
            <div><a href="#edit">Edit</a></div>
            <div><a href="#view">View</a></div>
            <hr />
            <div><a href="#insert">Insert</a></div>
            <div><a href="#modify">Modify</a></div>
            <div><a href="#control">Control</a></div>
            <div><a href="#debug">Debug</a></div>
            <div><a href="#window">Window</a></div>
            <div><a href="#help">Help</a></div>
        </div>
    </div>
</div>

<div>
    testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu testing content below menu 
</div>

--------------- Css:

.lbtn
{
    display:inline-block;
    cursor:pointer;
    height:20px;
    background-color:silver;
    background-repeat:repeat-x;      
    border:1px solid black; /* dark navy blue */ 
    text-decoration:none;
    font-size:11pt;
    text-align:center;
    line-height:20px;
    padding:0px 10px 0px 10px;
}

.divMenuWrapper1
{
    height: 25px;
    width: 75px;
}

.file_menu 
{
    display:none;
    width:250px;
    border: 1px solid #1c1c1c;
    background-color: white;
    position:relative;
    z-index:100000;
}

.file_menu div 
{
    background-color: white;
    font-size:10pt;
}

.file_menu div a 
{
    color:gray; 
    text-decoration:none; 
    padding:3px; 
    padding-left:15px;
    display:block;
}

.file_menu div a:hover 
{
    padding:3px;
    padding-left:15px;
    text-decoration:underline;
    color: black;
}

--------------- jQuery (для размещения в документе document.ready или pageLoad()):

$("#hoverli").hover(
    function () {
        $('#actions_menu').finish().slideDown('fast');
    },
    function () {
        $('#actions_menu').finish().slideUp('fast');
    }
);

Ответ 6

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

Если вы дадите вашему div меню "file menu" позиции абсолютное, тогда он должен перестать влиять на какие-либо элементы перед ним, поскольку вы выберете его из нормального потока.

Ответ 7

Чтобы получить поле выбора, которое нужно открыть при наведении, до точной высоты, необходимой его содержимому, выяснить, сколько элементов есть:

JavaScript

function DropList(idval) {
    //
    // fully opens a dropdown window for a select box on hover
    //
    var numOptgroups = document.getElementById(idval).getElementsByTagName('optgroup').length;
    var numOptions   = document.getElementById(idval).getElementsByTagName('option').length;
    document.getElementById(idval).size = numOptgroups + numOptions;
}

HTML

<select class="selectpicker" id="heightMenu" onmouseover="DropList('heightMenu')" onmouseout="this.size=1;" size="1">
    <option value="0">Any height</option>
    etc.
</select>