1

введите сюда описание изображения

В хедере мобильной версии выводится что-то вроде лого, вывод идёт через ::before content, как с помощью jQuery можно сделать кликабельным верхнюю левую часть div'a, где надпись Apple (чтобы перенаправляло на другой url)? Пытался подцепиться к before, но потом понял, что это псевдо-селектор и задумка не реализуема, а в див/спан надпись не обёрнута

HTML код header'a:

<div class="home-2 mbm hidden-md hidden-lg header_area main-menu-area">
<div class="menu_area mobile-menu mean-container">
<div class="mean-bar">
::before
<a href="#nav" class="meanmenu-reveal" style="background:;color:;right:0;left:auto;"></a>
<nav class="mean-nav">
<ul ....>
<li ....>
</nav>
</div>
</div>
</div>

CSS:

.mean-container .mean-bar::before {
    content: "APPLE";
}
2
  • Круто было бы если сказали, к какому элементу идёт ::before content ?
    – Arsen
    29 июл 2020 в 13:32
  • @Arsen, да, забыл добавить. Исправил.
    – pon89aa
    29 июл 2020 в 13:47

1 ответ 1

1

Поскольку Вам не к чему "привязаться" относительно APPLE, то тогда можно исключить все остальные элементы. Однако имейте ввиду что "редирект" будет происходить по всей области заголовка и не будет ограничен длинною фразы, заданной через псевдо-элемент.

const handleClick = event => {
  const classList = event.target.classList
  if (classList.contains("meanmenu-reveal")) {
    document.querySelector("nav").classList.toggle("hide")
  } else if (!classList.contains("mean-nav")) {
    // location.assign("https://yandex.ru")
    console.log("redirect to another page")
  }
}

document.querySelector(".mean-bar").addEventListener("click", handleClick)
.mean-bar::before {
  content: "APPLE";
  margin-right: 300px; // для теста
}

.mean-nav {
  margin-left: 350px; // для теста
}

.hide {
  display: none;
}
<div class="home-2 mbm hidden-md hidden-lg header_area main-menu-area">
  <div class="menu_area mobile-menu mean-container">
    <div class="mean-bar">
      <a href="#nav" class="meanmenu-reveal">МЕНЮ</a>
      <nav class="mean-nav hide">открыто</nav>
    </div>
  </div>
</div>

jQuery:

const handleClick = event => {
  const classList = event.target.classList
  if (classList.contains("meanmenu-reveal")) {
    $("nav").toggleClass("hide")
  } else if (!classList.contains("mean-nav")) {
    // location.assign("https://yandex.ru")
    console.log("redirect to another page")
  }
}

$(".mean-bar").on("click", handleClick)
1
  • Задумку понял. Не совсем то, как я это видел, но тоже подходящий вариант, спасибо.
    – pon89aa
    29 июл 2020 в 14:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.