Проблемы с выпадающим меню. Держать это упало при определенных обстоятельствах

Question

У меня есть горизонтальное выпадающее меню на моем сайте.В настоящее время его глубина составляет всего два уровня:

<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.2 виден при наведении курсора на вариант 1.1

Клиент сказал, что ему нравится раскрывающееся меню.Однако, чтобы перейти от Варианта 1.1.1 к Варианту 1.1.2, вам придется снова перемещаться по многоуровневому меню, и это механизм, который им не нравится.

У меня была идея определить, какую страницу Варианта пользовательи затем внесение поправок в классы, чтобы они постоянно были видны.Например: если бы я был на странице Варианта 1.1.1, то все равно было бы видно полное меню, обеспечивающее легкий доступ к Варианту 1.1.2

. Было бы возможно через JQuery и Javascript вернуть Вариант из URL, а затемпоиск в многоуровневом меню для добавления классов в меню, позволяющих ему вести себя определенным образом.

Я не уверен, с чего начать.

Мои URL структурированы какниже:

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

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

Answer 1

Рассматривали ли вы использование выпадающего меню, которое будет в jQuery UI 1.9 (и уже доступно в Github?)

Вам нужно настроить стили, чтобы сделать ваше главное менюгоризонтальный (и всегда видимый), или поочередно обрабатывайте каждый из элементов <li> верхнего уровня как триггеры для отдельных $.menu() элементов, связанных с их дочерними <ul> элементами.

Я поместил некоторый демонстрационный код вhttp://jsfiddle.net/tcg2m/12/

Требуется некоторая работа, чтобы понять, как сделать меню верхнего уровня горизонтальным, а не вертикальным.

Answer 2

Прежде всего вы должны знать, на каком псевдониме вы находитесь.Вы можете разобрать это в javascript с помощью PHP или вы можете проверить document.location.href и исправить это с помощью регулярного выражения.

Например, если вы обнаружили, что псевдоним - опция111, вам нужно будет навести курсор мыши на элементы меню, необходимые для доступа к этому меню.

$.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 после вашего комментария-

Может быть полезно указать идентификаторы dropdownmenu, которые похожи на их место в иерархии.Таким образом, вы можете увидеть, какие элементы выпадающего меню должны быть открыты, используя псевдоним в URL.Таким образом, мы можем зацикливаться (мы можем сделать это, используя while, каждый или какой вы пожелаете).

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');