Способ очистки: всплывающее меню в раскрывающемся меню на сенсорном экране?

Question

Способ очистки: всплывающее меню в раскрывающемся меню на сенсорном экране?

0

У меня есть довольно стандартное раскрывающееся меню CSS, использующее: наведение для отображения дочерних элементов и использование плагина Doubletap для захвата и очистки событий касания, чтобы можно было отображать элементы детского меню на сенсорных устройствах.

Теперь я хочу, чтобы "закрыть" открывшийся элемент меню, когда пользователь нажимает на крест. Пока что у меня есть:

По умолчанию кросс скрыт.
Крест становится видимым, когда родительский ли: зависает

Но мне также нужно:

При перекрестном соединении родительский: состояние зависания очищается (возврат в исходное состояние).

Вот мой JSFiddle и вот моя надбавка:

 <ul id="main-menu">
            <li class="parent" aria-haspopup="true"><a href="#">Item One</a>
                <span class="tapclose">X</span>
                <!-- sub-menu -->
            </li>
            <li class="parent" aria-haspopup="true"><a href="#">Item Two</a>
                <span class="tapclose">X</span>
                <!-- sub-menu -->
            </li>
  </ul>

Какой лучший способ сделать это? Меню должно работать как на сенсорных, так и на мышиных интерфейсах. Я открыт для решений JQuery, CSS и разметки.

Ila 14 март 2014, в 02:44

Источник

0

Я не могу ответить на этот вопрос, но мы используем :hover :focus и :active чтобы вы могли использовать мышь, нажатие клавиши клавиатуры и касаться наших меню.
Stephen P 14 март 2014, в 00:52
0

Этот вопрос был задан ранее: stackoverflow.com/questions/14068773/…
Matt Smith 14 март 2014, в 01:24

Теги:

jquery

html

css

1 ответ

Ещё вопросы

Я не могу ответить на этот вопрос, но мы используем :hover :focus и :active чтобы вы могли использовать мышь, нажатие клавиши клавиатуры и касаться наших меню.
Этот вопрос был задан ранее: stackoverflow.com/questions/14068773/…

Leo · Answer 1 · 2014-03-14T00-21-00.000Z

Какой лучший способ сделать это?

Это сложный вопрос, потому что, хотя есть несколько способов достичь того, что вы пытаетесь сделать, каждый из них будет иметь свои плюсы и минусы, и он будет навсегда открыт для дискуссий, основанных на мнениях. Поэтому я бы посмел сказать, что нет никакого ЛУЧШЕГО способа сделать это, но, конечно, некоторые подходы могут быть более подходящими или более чистыми

Я лично считаю, что jQuery делает все так просто и приятно изучает. Но я не утверждаю, что это лучший способ сделать это. Собственно, я собрал минималистский пример, демонстрирующий его потенциал, чтобы хорошо разбираться в этих типах меню в этом JS Fiddler

Где я использую эту структуру html...

<nav>
    <div class="l1">Item 1
        <div class="l2">
           <div>Sub Item 1.1</div>
           <div>Sub Item 1.2</div>
        </div>
    </div>
    <div class="l1">Item 2 
        <div class="l2">
           <div>Sub Item 1.1</div>
           <div>Sub Item 1.2</div>
        </div>
    </div>
    <div class="l1">Item 3
        <div class="l2">
           <div>Sub Item 1.1</div>
           <div>Sub Item 1.2</div>
        </div>
    </div>
    <div class="l1">Item 4
        <div class="l2">
           <div>Sub Item 1.1</div>
           <div>Sub Item 1.2</div>
        </div>
    </div>
</nav>

Вместо этого рассмотрим использование элементов ul и li. Я также использую эти таблицы стилей...

nav{
    display:block;
    height:25px;
    padding:10px 50px;
    background-color:black;
    color:yellow;
    font-weight:bold;
}
nav div.l1{
    margin-right:20px;
    display:inline-block;
    zoom:1;
    *display:inline;
}
nav div.l2{
    display:none;
    background-color:yellow;
    color:black;
    position:absolute;
    margin-top:16px;
    z-index:1;
    padding:20px 10px;
}

и, наконец, этот jQuery...

$(function(){
    $('div.l1').click(toggleSubItems);
});

function toggleSubItems(){
    $('div.l2').not($(this).children('div.l2')).hide();
    $(this).children('div.l2').toggle(400);
}

Обратите внимание, что все проблемы прекрасно разделены... javascript, html, css. Но опять же, возьмите это как пример, чтобы продемонстрировать, что его потенциал может быть расширен не как шаблон для вашего проекта.

Надеюсь, поможет