下拉菜單問題。在某些情況下保持它下降

我在我的網站上有一個水平下拉菜單。它目前只有兩層深度：下拉菜單問題。在某些情況下保持它下降

<ul><li>Option 1 
    <ul><li>Option 1.1 
     <ul> 
      <li>Option 1.1.1</li> 
      <li>Option 1.1.2</li> 
     </ul> 
    </li></ul> 
</li></ul>

選項1層始終可見。在懸停在選項1上時可以看到1.1，並且在懸停在選項1.1上時可以看到選項1.1.1和1.1.2。

客戶說他們喜歡下拉菜單。但是，從選項1.1.1到選項1.1.2，需要再次導航多級菜單，這是他們不喜歡的機制。

我有想法檢測用戶在哪個選項頁上，然後修改類，以便它們始終可見。例如：如果我在選項1.1.1頁面上，完整菜單仍然可見，允許輕鬆訪問選項1.1.2

通過JQuery和Javascript從URL中返回選項然後搜索多級菜單可將菜單添加到菜單中，以便以某種方式運行。

我不確定從哪裏開始。

我的網址如下結構：

[root]/category.php?alias=option111 
[root]/category.php?alias=option112

我不知道我將如何通過菜單搜索雖然。你能提供一些幫助嗎？

來源

2011-03-14 Dan Hanly

首先，您將不得不知道您正在使用哪個別名。您可以使用PHP將其解析爲JavaScript，或者您可以檢查document.location.href並使用正則表達式對其進行修復。

例如，如果您發現別名是option111，則必須觸發菜單項上的鼠標懸停，以便進入該菜單。

$.document.ready(function() { 

    //Fix something that 'alias' is an array and contains the numbers of menuitems that you use in your id structure of the menuitems. 

    alias.each(function() { 
     $('#menuitem'+$(this)).trigger('mouseover'); 
    }); 
});

這只是一個你可以使用的概念。我希望你能使用這個想法。

-edit後您的comment-

這可能是給你dropdownmenu ID的這些與他們的層級結構中的地方是有用的。這樣你可以看到哪些下拉菜單項應該使用url中的別名打開。這樣我們可以循環（我們可以使用while，each或者任何你喜歡的方式）。

var alias = document.location.href.slice(6,0); // getting the alias (ex: 111) 
var i = 0; 
while(i < alias.length) { //for each alias character (menu, submenu, subsubmenu, etc) 
$('#menuitem'+alias.substring(0,i).trigger('mouseover'); //trigger the mouseover for ex #menuitem1, or #menuitem32, or #menuitem152 
i++; //increment i to make the loop finite. 
}

，或者如果你的鼠標懸停事件顯示的時間很短的菜單，你可以使用的 $('#menuitem'+alias.charAt(i)).css('display','block');代替

$('#menuitem'+alias.charAt(i)).trigger('mouseover');

來源

2011-03-14 14:45:31 rsplak

這是通過查看我的多層列表並挑選哪些與當前相關的難題。我將如何搜索以添加該觸發事件？ +1對於我不知道的觸發器（我是JQuery的新手） – 2011-03-14 14:59:37

觸發器（'mouseover'）的問題是，如果用戶觸摸菜單，菜單的任何部分與光標，它跳轉和復位。我需要它在整個頁面上呆在那裏。我認爲這與下拉菜單插件衝突。我已經嘗試過.addClass（）和風格的類，我試着實際設置.css（），但沒有一個這似乎影響它。 – 2011-03-14 16:12:43

我明白了，所以當鼠標用來打開菜單的任何部分時，插件會自動隱藏活動菜單項？我不知道這是否有效，但是當打開設置爲！important的頁面時，您可以嘗試爲活動菜單項創建新的CSS樣式。 Javscript不能輕易覆蓋！重要的css語句，但我不知道javascript是否可以設置它們。嘗試$（'＃menuitem'+ alias.charAt（i））.css（'display'，'block！important'）;我希望它能解決這個問題。 – rsplak 2011-03-14 16:25:17

你有沒有使用那將是jQuery的菜單下拉考慮UI 1.9（和Github中的already available？）

您需要調整樣式以使主菜單保持水平（並始終可見），或者交替處理每個頂級<li>元素作爲觸發器s單獨$.menu()項目掛鉤其子<ul>元素。

我已經把一些演示代碼在http://jsfiddle.net/tcg2m/12/

它需要一些工作，以找出如何讓頂級菜單的水平，而不是垂直的。

來源

2011-03-14 15:32:04 Alnitak

我會記住這一點，但我不能將它用於當前項目，因爲我現在正在改變菜單太遠了。雖然 – 2011-03-15 09:36:45

感謝http://jsfiddle.net/tcg2m/12/演示代碼似乎不再工作。是否有修訂的演示/代碼在哪裏？ – Wavesailor 2012-11-18 13:21:54

@Wavesailor鏈接插件鏈接到使用jsfiddle支持的舊版jQuery UI中沒有的函數的最新代碼。它現在全部內置於jQuery UI 1.9中。我更新了小提琴，但 - http://jsfiddle.net/alnitak/tcg2m/20/ – Alnitak 2012-11-18 21:18:19

下拉菜單問題。在某些情況下保持它下降

回答

相關問題