Список, как выбрать выпадающий с JQuery?

Question

Пожалуйста,

Я хочу смоделировать выпадающий список, но там будут только ссылки, а не форма. Проблема в том, как выбрать и увидеть ссылку категории или подкатегории, где Вы находитесь в данный момент?

<ul><li>Category
   <ul>
     <li>Subcategory1</li>
     <li>Subcategory2</li>
   </ul>
</li></ul>

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

Если у вас есть какое-то другое решение, предложите мне.

Извините за мой английский, я не знаю, как объяснить лучше:)

Answer 1

Если я правильно вас понимаю, для меня это звучит так, будто вам просто нужна пара div элементов. Один, чтобы показать текущий выбранный элемент, а другой, чтобы показать все меню (минус текущий элемент?).

Если это так, вы можете прикрепить событие щелчка к каждому пункту меню, который обновит текст верхнего div:

<div id="current_page">Default Value</div>
<div id="current_menu">
  <ul>
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
  </ul>
</div>

Тогда вы будете использовать jQuery для добавления некоторых эффектов и логики:

$("#current_page").click(function(){
  $("#current_menu").slideToggle();
});

$("#current_menu a").click(function(event){
  event.preventDefault(); //prevent synchronous loading
  $("#current_page").html($(this).text());
});

Answer 2

Вот хороший список возможных решений - http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/

Answer 3

После каждого клика вам нужно установить класс соответствующего li, перебирая элементы списка и проверяя текущее местоположение:

<div id="div1">
    <ul>
    <li>Category
        <ul>
            <li><a href="abc">Subcategory1</a></li>
            <li><a href="xyz">Subcategory2</a></li>
        </ul>
    </li>
    </ul>
</div>

Тогда ваш javascript:

var loc = window.location;
$("#div1 li").each( function(){
    var a = $("a", this).attr("href");
    if(a == loc){
        $(this).addClass("hilight");
    } else {
        $(this).removeClass("hilight");
    }
});

Answer 4

Я думаю, что вы ищете Раскрытия Suckerfish .