Сделать кликабельной левую часть header'a jQuery

Question

В хедере мобильной версии выводится что-то вроде лого, вывод идёт через ::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";
}

Answer 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)

БЛОГ НА HUSL

Сделать кликабельной левую часть header'a jQuery

Ответы (1 шт):