Как заморозить раскрывающийся список, который щелкнул в CSS3, Javascript?

Question

Итак, я следил за выпадающим меню tutoiral:

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:%20nettuts%20(NETTUTS)&utm_content=Netvibes

Что я действительно хочу сделать, это что-то вроде этого, но чтобы я мог сделать так, чтобы, когда пользователь нажимает на элемент в раскрывающемся списке, то, что пользователь щелкнул, было выделено, и даже когда пользователь перемещает мышь прочь, элемент раскрывающегося списка остается там и не разрушается, чтобы помочь пользователю дать представление о том, на какой странице он находится. Если пользователь выбирает другой вариант в раскрывающемся списке, то предыдущий, по которому щелкнул пользователь, возвращается в нормальное состояние, и новый элемент, по которому щелкнул пользователь, выделяется.

Как мне это сделать с помощью jquery, javascript или есть способ только с CSS3 и HTML5?

Answer 1

Если я правильно вас понимаю, вы бы хотели, чтобы произошло следующее:

1. Первая загрузка страницы, все раскрывающиеся меню свернуты.
2. Пользователь наводит курсор мыши на элемент меню, выпадающийпоявляется подменю
3. Пользователь наводит курсор на элемент подменю, он подсвечивается.
4. Пользователь щелкает элемент подменю - страница перезагружается.На новой странице раскрывающееся подменю все еще отображается с выделенным активным элементом.
5. Пользователь снова выполняет шаги 1-4 для другого элемента подменю, когда при перезагрузке страницы предыдущее подменю сворачивается, но новоеподменю будет видно.

Основной вопрос здесь заключается в том, будет ли страница перезагружаться всякий раз, когда пользователь нажимает на элемент, поскольку решение будет отличаться в зависимости от этого.

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

<nav id="topNav">
    <ul>
        <li><a href="#" title="Nav Link 1">Nav Link 1</a></li>
        <li class="currentParent"><a href="#" title="Nav Link 1">Nav Link 2</a>
            <ul>
                <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
                <li class="current"><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
                <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
                <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
                <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
            </ul>        
        </li>
      <li><a href="#" title="Nav Link 1">Nav Link 3</a></li>
      <li><a href="#" title="Nav Link 1">Nav Link 4</a></li>
      <li class="last"><a href="#" title="Nav Link 1">Nav Link 5</a></li>
  </ul>
</nav>

И вам нужно изменить CSS:

nav ul ul a:hover { background-color:#555; }

до:

nav ul ul a:hover, nav ul ul li.current a:hover { background-color:#555; }

и:

.no-cssgradients nav li:hover, .no-js nav li:hover { ... }

до:

.no-cssgradients nav li:hover, .no-cssgradients nav li.currentParent, .no-js nav li:hover, .no-js nav li.currentParent { ... }

И добавьте следующую строку:

nav ul li.currentParent ul { display:block; }

А затем в JavaScript измените:

//show subnav on hover
$(this).mouseenter(function() {
    $(this).find("ul").stop(true, true).slideDown();
});

//hide submenus on exit
$(this).mouseleave(function() {
    $(this).find("ul").stop(true, true).slideUp();
});

на:

//show subnav on hover
$(this).mouseenter(function() {
    if(!$(this).hasClass('currentParent')) {
        $(this).find("ul").stop(true, true).slideDown();
    }
});

//hide submenus on exit
$(this).mouseleave(function() {
    if(!$(this).hasClass('currentParent')) {
        $(this).find("ul").stop(true, true).slideUp();
    }
});

Я на самом деле не проверял это, поэтому я уверен, что вам придетсясделайте больше, чем это, чтобы получить идеально работающее решение, но я надеюсь, что вы можете увидеть то, что я пытаюсь сделать здесь.

Answer 2

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

Разметка

<select id="mySelectBox" multiple="multiple" size="4">
  <option value="Item1">Item1</option>
  <option value="Item2">Item2</option>
  <option value="Item3">Item3</option>
  <option value="Item4">Item4</option>
</select>

Js

$(function(){
    $("#mySelectBox").delegate("option", "click", function(){
        $(this).parent().children().attr("selected", false);
        $(this).attr("selected", true);
    }); 
});

Woring демо