jQuery下拉懸停菜單

我是jQuery的新手，我希望你們能幫助我。我試圖做一個懸停下拉菜單，但它是非常錯誤的。你能幫我清理我的Javascript嗎？請看我的代碼。jQuery下拉懸停菜單

它不能在jsdo.it不管出於什麼原因工作，但它在科莫多編輯工作。

如果你真的想嘗試一下代碼，問題主要是Javascript。你能幫助我做到這一點：當用戶將鼠標懸停在img.menu_class上時，ul.file_menu會下降，然後，如果我願意，我可以將鼠標懸停在ul的某個位置，並且它會水平放置，而不是垂直放置。

感謝您的幫助！我很感激！

我應該放棄並讓它在CSS中工作嗎？

來源

2012-01-08 Matt

能你發佈了一個鏈接到科莫多編輯版本？我認爲問題在於jQuery不包含在jsdo.it中。 – Purag 2012-01-08 06:42:17

是的，對不起。我真的很累，早上1點，我不想去麻煩。 – Matt 2012-01-08 16:51:33

你可以這樣做this：

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

而且here一個例子與子菜單：

$(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'); 
     } 
    ); 
});

來源

2012-01-08 07:10:10

如何將相同的技巧應用於子菜單？ – Matt 2012-01-08 17:02:48

哈哈，現在它不工作在科莫多編輯 – Matt 2012-01-08 17:03:14

好吧，這是一個同步問題 – Matt 2012-01-08 17:26:33

不知道，如果你不在乎，但你要確保你運行。 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'); 
    } 
); 

});

來源

2013-03-07 20:44:44 htmelvis

我的壞.stop（[quecache]，[finishthecurrentanim]） – htmelvis 2013-03-07 20:45:26

任何人誰在未來亞蘭的回答可以用.slideToggle()縮短處理上下均認爲這。

下面是修改後的小提琴

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

如果你有一個子菜單設置爲display: none;就會觸發也行，所以你想要做的是將其設置爲block，再加入一些像這樣

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

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

並將它放在您的第一個slideToggle正下方。爲什麼我不告訴你？

$(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); 
    }); 
});

來源

2013-07-15 02:59:09 MCB

在jQuery中使用完成功能可以防止將鼠標懸停在菜單上並跳出菜單的錯誤。完成比先前建議的停止功能更好。

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

來源

2014-01-31 20:52:40 androidmj

Aram Mkrtchyan的回答幾乎就在我身邊。與他的問題是，如果你添加菜單下面的任何東西，那麼它會變得一團糟。這裏是什麼，我的意思是一個例子，我在下面他的菜單一個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或p ageLoad（））：

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

來源

2014-10-07 20:58:44

我知道這可能是有點晚了，但剛剛發現這個線程看到上面關於菜單「變得有點扭曲」下面的事情你的問題是沒有答案。

如果你給與類「文件菜單」，應該停止影響它前面的所有元素，你將採取它的正常流動的絕對的位置。然後你的股利。

來源

2015-06-11 18:47:17 samnicho

爲了得到一個選擇框上懸停其內容所需要的確切高度開放，弄清楚有多少要素有：

的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>

來源

2017-01-08 12:15:12

jQuery下拉懸停菜單

回答

相關問題