Хобрук: Ваш путь к мастерству в программировании

Многоуровневое меню на мобильном телефоне с тачстартом на иконке внутри ссылки

Есть многоуровневое меню, где каждый <li> содержит <a>. На рабочем столе подменю открывается с помощью :hover и все хорошо. На мобильном телефоне я хочу заменить :hover на щелчок по значку шрифта с значком вставки вниз, щелкнуть, чтобы открыть подменю. Однако в приведенном ниже html <a> фиксирует сенсорный запуск.

Как зафиксировать щелчок по значку, который находится внутри ссылки, и чтобы остальная часть ссылки оставалась доступной?

        $(document).ready(function () {
            $('.hover').bind('touchstart', function (e) {
                e.preventDefault();
                $(this).parent().toggleClass('hover_effect');
            });
        });

Это структура меню:

<li class="hover"><a href="/link1">WordPress Development<i class="fa fa-caret-down hover" aria-hidden="true"></i></a>
    <ul>
        <li><a href="/link2">Themes</a></li>
        <li><a href="/link3">Plugins</a></li>
        <li class="hover"><a href="/link4">Custom Post Types<i class="fa fa-caret-down hover" aria-hidden="true"></i></a>
            <ul>
                <li class="hover"><a href="/link5">Portfolios</a></li>
                <li class="hover"><a href="/link6">Testimonials</a></li>
            </ul>
        </li>
        <li><a href="/link7">Options</a></li>
    </ul>
</li>
javascript menu html jquery css
15.06.2017

Ответы:


1

Итак, вам нужно событие или функция, которая будет работать не по ссылке, а по вашей прекрасной иконке. И поскольку в вашей навигации у вас есть только один тег, вам не нужно указывать его идентификатор или класс, просто замените «.hover» на «.hover i»:

`

$(document).ready(function () {
   $('.hover i').bind('touchstart', function (e) {
     e.preventDefault();
     $(this).parent().toggleClass('hover_effect');
  });
});

`

15.06.2017
  • Если нажать на иконку на мобильном, то все равно <a> фиксирует тачстарт, а не <i> 15.06.2017
    • Новые материалы
    Блоги, которые обязательно нужно прочитать специалистам по обработке и анализу данных :
    Добро пожаловать в 2020! Новый год и новое десятилетие. Поскольку мы начинаем новый и захватывающий год в науке о данных, важно, чтобы профессионалы открыли для себя лучшие блоги по науке о..
    Универсальный базовый доход
    Универсальный базовый доход В последние годы концепция всеобщего базового дохода (УБД) набирает обороты как все более эффективное решение для борьбы с растущим неравенством доходов и..
    Освоение Python для анализа финансовых данных: руководство по получению данных о доходах от акций
    Если вы хотите научиться получать данные о доходах от акций с помощью Python, то это руководство для вас! В этой статье мы рассмотрим несколько примеров сбора данных о доходах от акций. Мы..
    Абсолютно имеет смысл.
    Абсолютно имеет смысл. Мой репетитор даже предложил то же самое. Одна проблема, с которой я столкнулся, заключается в том, что для каждой из категорий не было ярлыка «хорошо». Если я перебираю..
    МАШИННОЕ ОБУЧЕНИЕ И EDA
    Каковы шаги в машинном обучении Определение проблемы Генерация гипотез Извлечение данных Исследование данных Прогнозное моделирование Развертывание модели Зачем нам ЭДА? Идентификация..
    В чем основные различия между ReactJS и React-Native?
    В чем основные различия между ReactJS и React-Native? Что я узнал, создавая веб-приложения, а затем мобильные приложения на React React-Native существует уже около 2 лет и стал..
    LeetCode — Умножение строк
    Постановка задачи Даны два неотрицательных целых числа num1 и num2 , представленные в виде строк, вернуть произведение num1 и num2 , а также представлен в виде строки. Примечание . Вы..