javascript
  • jquery
  • html
  • css
  • 2015-04-22 47 views -2 likes 
    -2

    我有以下的html:jQuery的了slideDown菜单触发让太快菜单效果基本show

     <div class="col-sm-12" id='dropdown_menu_group'> 
         <div id='dropdown_library_menu'> 
          <div class="row" id='dropdown_menu_row'> 
           <div class="col-sm-2"> 
            <a class='button-text btn' id='library_button' href="{{pathFor 'library'}}">my library</a> 
           </div> 
           <div class='col-sm-2 col-sm-pull-1' id='google_drive_text'> 
            GOOGLE DRIVE 
           </div> 
           <div class="col-sm-2" id='settings_button'></div> 
          </div> 
         </div> 
         <div id='dropdown_library_menu_border'></div> 
        </div> 
    

    id='dropdown_library_menu'默认是隐藏的,它下面<div id='dropdown_library_menu_border'></div>的div有0透明度,这样,当它被滚动过,它会使id='dropdown_library_menu'下滑。但问题是,当菜单向下滑动时,<div id='dropdown_library_menu_border'></div>仍然存在,因此,当我滚动触发slideDown的不透明度0 div(菜单内部,此时),它会欺骗我的jQuery,条件得到满足:

    'mouseout #dropdown_library_menu': function(ev){ 
        ev.preventDefault(); 
        $('#dropdown_library_menu').slideUp('slow'); 
    } 
    

    因为从技术上讲,我将鼠标移出下拉菜单并进入下拉菜单触发器。

    我想让空白的div移动到菜单底部,当slideDown被触发,但父母设置为position relative,孩子的position absolute完全弄乱了我的网页。

    +1

    您可以张贴的jsfiddle例子吗? –

    +0

    我刚刚尝试......没有工作。这是一个webapp中的一个页面的一部分,它有几个js包在里面 – redress

    回答

    5

    你可以把它更慢,

    'mouseout #dropdown_library_menu': function(ev){ 
    ev.preventDefault(); 
    $('#dropdown_library_menu').slideUp(3000); // Slide up in 3 seconds, 
    } 
    
    +0

    ...什么?这没有任何意义 – redress

    +0

    只是无法想象你的布局如何安排。请告诉我你的问题中“空格”是什么?是不透明度0的同一个div吗? –

    +0

    是的,它是与不透明度相同的div 0 – redress

    相关问题