jQuery mouseover and mouseleave drop down menus

前端 未结 4 1867
-上瘾入骨i
-上瘾入骨i 2021-02-15 15:48

The following displays a menu:

ONZE WAARDEN

相关标签:
4条回答
  • 2021-02-15 15:49
      $(document).ready(function () {
                    $('#Dropdown').mouseover(function () {
                        $(this).slideDown();
                    });
                });
     $(document).ready(function () {
                    $('#Dropdown').mouseleave(function () {
                        $(this).slideup();
                    });
                });
    

    i think this might help..

    0 讨论(0)
  • 2021-02-15 15:52

    hover plugin includes both mouseenter and mouseleave follwing code works fine for me

    javascript:

    $(document).ready(function(){
    
        $('.dropdown').hover(
        function(){
    
            $(this).children('.dropdown-menu.pricing-drop').slideDown('fast');
        },
        function () {
            $(this).children('.dropdown-menu.pricing-drop').slideUp('fast');
        });
    });
    
    0 讨论(0)
  • 2021-02-15 16:15

    Is this what you are trying to do?

    HTML

    <ul>
    <li class="main-menu">
      ONZE WAARDEN
      <ul class="sub-menu" style="display: none;">
        <li><a href="#">FAQ</a></li>
        <li><a href="#">ITC</a></li>
        <li><a href="#">CLUB</a></li>
        <li><a href="#">CULTUUR</a></li>
        <li><a href="#">ROBITICA</a></li>
      </ul>
    </li>
    </ul>
    

    Javascript

    $('.main-menu').mouseenter(function(){
      $(this).find('.sub-menu').slideDown();
    });
    
    $('.main-menu').mouseleave(function(){
      $(this).find('.sub-menu').slideUp();
    });
    
    0 讨论(0)
  • 2021-02-15 16:16

    Use some wrapper on your html, and then call mouseleave event on it, like there: http://jsfiddle.net/9yEHV/11/

    $("#wrapper").mouseleave(function () {
        $("#citydrop").slideUp('slow');
    });
    

    And wrapper:

    <div id="wrapper">
        <a href="#" id="cityclick" >ONZE WAARDEN</a>
        <!-- rest of your code -->
    </div>
    
    0 讨论(0)
提交回复
热议问题