БЛОГ НА HUSL


Как пофиксить клик номера в бургер-меню?

Автор вопроса: Дмитрий

При открывание бургера, открывается меню. дальше при нажимании на 'пункт', оно скролит до этого пункта(это делает другой JS), и закрывается бургер меню(это делает JS, который прилагаю). Но в бургере есть и кликабельный номер. и вот он из за второго куска JS, закрывается, не открывшись(не звонит)

Проблема я вижу где, а именно, JS закрывает всё меню и поэтому меню не кликается. Но как это можно обойти, подскажите пожалуйста

http://jsfiddle.net/

$(document).ready(function() {
    $("#nav_toggle").on("click", function(event) {
        event.preventDefault();

        $(this).toggleClass("active");
        $("#nav").toggleClass("active");
        $("#header.fixed").toggleClass("active");

    });
});



//Этот скрипт закрывает бургер при клике

$(document).ready(function() {
    $("#nav").on("click", function(event) {
        event.preventDefault();

        $("#nav").removeClass("active");
        $(this).removeClass("active");
        $("#header.fixed").removeClass("active");
        $("#nav_toggle").removeClass("active");


    });
});
.header {
    width: 100%;
    padding-top: 30px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header.fixed {
    padding: 5px 0;
    background: rgba(11, 20, 25, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translate3d(0, 0, 0);
}

.header.active {
    background: rgba(11, 20, 25, 0.97);
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav {
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 15px
}

.nav__link {
    display: inline-block;
    vertical-align: top;
    margin: 0 15px;
    position: relative;
    color: #fff;
    text-decoration: none;
    transition: color .1s linear;
}

.nav__link1{
    display: none;
}
.nav__link2 {
    margin: -2px 30px 0 0;
    font-weight: 700;
    font-size: 16px;
    }
.nav__link:after {
    content: "";
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fce38a;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    transition: opacity .1s linear;
}
/* Nav toggle */

.nav-toggle {
    width: 30px;
    padding: 10px 0;
    display: none;
    font-size: 0;
    color: transparent;
    border: 0;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1;
}

.nav-toggle:focus {
    outline: 0;
}

.nav-toggle__item {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transition: background .2s linear;
}

.nav-toggle.active .nav-toggle__item {
    background: none;
}

.nav-toggle__item:before,
.nav-toggle__item:after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #000;
    position: absolute;
    left: 0;
    z-index: 1;
    transition: transform .2s linear;
}

.nav-toggle__item:before {
    top: -8px;
}

.nav-toggle__item:after {
    bottom: -8px;
}

.nav-toggle.active .nav-toggle__item:before {
    transform-origin: left top;
    transform: rotate(45deg) translate3d(0px, -2px, 0)
}

.nav-toggle.active .nav-toggle__item:after {
    transform-origin: left bottom;
    transform: rotate(-45deg) translate3d(0px, 3px, 0);
}
.nav__icon {
  font-size: 25px;
    margin-top: -7px;
}






















/* Nav */
        .nav {
            display: none;
            width: 100%;
            position: absolute;
            top: 100%;
            left: 0;
            background: rgba(11, 20, 25, 0.97);
        }
        .nav.active {
            display: block;
            margin-top: 0px;
        }
        .nav__link {
            display: block;
            margin: 0;
            padding: 8px 20px;
        }
    .nav__link1{
        display: none
    }
    .nav__link2 {
        margin: -5px 0 15px;
    }
        .nav-toggle {
            display: block;
        }
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header" id="header">
    <div class="container">
        <div class="header__inner">
            <a href="#s5" style="text-decoration: none;"><div class="header__logo"> 
                    <div class="logo__h2"><h2 class="logo__h2" id="example">HTML</h2></div>
                </div></a>

            <nav class="nav" id="nav">
                <a class="nav__link" href="#s1" data-scroll="">loft</a>
                <a class="nav__link" href="#s2" data-scroll="">Правила</a>
                <a class="nav__link" href="#s3" data-scroll="">Галерея</a>
                <a class="nav__link" href="#s4" data-scroll="">Контакты</a>
                
                    <i class="fas fa-phone"></i>
                </a>

               <a class="nav__link nav__link2" href="tel:+7(929)986-94-99" title="+7 (929) 986-94-99">+7 (929) 986-94-99</a>
               
            </nav>

            <button class="nav-toggle" id="nav_toggle" type="button">
                <span class="nav-toggle__item">Menu</span>
            </button>
        </div>
    </div>
</header>


Источник

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

Автор решения: InDevX

Можно по закрытии проверять есть ли конкретный класс у ссылки, напр. event.target.classList.contains('nav__link2')

function addEvents () {
  document.querySelector('#nav_toggle').onclick = function (evt) {
    evt.preventDefault();
    this.classList.toggle('active');
    document.querySelector('#nav').classList.toggle('active');
    if (document.querySelector('#header').classList.contains('fixed')) {
      document.querySelector('#header').classList.toggle('active');
    }
  }
  document.querySelector('#nav').onclick = function (evt) {
    evt.preventDefault();
    if (!event.target.classList.contains('nav__link2')) {
      this.classList.remove('active');
      document.querySelector('#nav_toggle').classList.remove('active');
      if (document.querySelector('#header').classList.contains('fixed')) {
        document.querySelector('#header').classList.remove('active');
      }
    }
  }
}

document.addEventListener("DOMContentLoaded", addEvents);
.header {
    width: 100%;
    padding-top: 30px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header.fixed {
    padding: 5px 0;
    background: rgba(11, 20, 25, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translate3d(0, 0, 0);
}

.header.active {
    background: rgba(11, 20, 25, 0.97);
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav {
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 15px
}

.nav__link {
    display: inline-block;
    vertical-align: top;
    margin: 0 15px;
    position: relative;
    color: #fff;
    text-decoration: none;
    transition: color .1s linear;
}

.nav__link1{
    display: none;
}
.nav__link2 {
    margin: -2px 30px 0 0;
    font-weight: 700;
    font-size: 16px;
    }
.nav__link:after {
    content: "";
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fce38a;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    transition: opacity .1s linear;
}
/* Nav toggle */

.nav-toggle {
    width: 30px;
    padding: 10px 0;
    display: none;
    font-size: 0;
    color: transparent;
    border: 0;
    background: none;
    cursor: pointer;
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1;
}

.nav-toggle:focus {
    outline: 0;
}

.nav-toggle__item {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transition: background .2s linear;
}

.nav-toggle.active .nav-toggle__item {
    background: none;
}

.nav-toggle__item:before,
.nav-toggle__item:after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #000;
    position: absolute;
    left: 0;
    z-index: 1;
    transition: transform .2s linear;
}

.nav-toggle__item:before {
    top: -8px;
}

.nav-toggle__item:after {
    bottom: -8px;
}

.nav-toggle.active .nav-toggle__item:before {
    transform-origin: left top;
    transform: rotate(45deg) translate3d(0px, -2px, 0)
}

.nav-toggle.active .nav-toggle__item:after {
    transform-origin: left bottom;
    transform: rotate(-45deg) translate3d(0px, 3px, 0);
}
.nav__icon {
    font-size: 25px;
    margin-top: -7px;
}
/* Nav */
.nav {
    display: none;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(11, 20, 25, 0.97);
}
.nav.active {
    display: block;
    margin-top: 0px;
}
.nav__link {
    display: block;
    margin: 0;
    padding: 8px 20px;
}
.nav__link1{
  display: none
}
.nav__link2 {
  margin: -5px 0 15px;
}
.nav-toggle {
  display: block;
}
<header class="header" id="header">
    <div class="container">
        <div class="header__inner">
            <a href="#s5" style="text-decoration: none;">
                <div class="header__logo"> 
                    <div class="logo__h2"><h2 class="logo__h2" id="example">HTML</h2></div>
                </div>
            </a>
            <nav class="nav" id="nav">
                <a class="nav__link" href="#s1" data-scroll="">loft</a>
                <a class="nav__link" href="#s2" data-scroll="">Правила</a>
                <a class="nav__link" href="#s3" data-scroll="">Галерея</a>
                <a class="nav__link" href="#s4" data-scroll="">Контакты</a>
                    <i class="fas fa-phone"></i>
                </a>
               <a class="nav__link nav__link2" href="tel:+7(929)986-94-99" title="+7 (929) 986-94-99">+7 (929) 986-94-99</a>
            </nav>
            <button class="nav-toggle" id="nav_toggle" type="button">
                <span class="nav-toggle__item">Menu</span>
            </button>
        </div>
    </div>
</header>

→ Ссылка
Автор решения: i.prikot

event.preventDefault(); блокирует всплытие события выше по дереву. Попробуйте добавить проверку, на ссылку, что она является якорем.

$("#nav").on("click", function(event) { 
  if (event.target.href.indexOf('#') > -1) {
    event.preventDefault();
  }
        
  $("#nav").removeClass("active");
  $(this).removeClass("active");
  $("#header.fixed").removeClass("active");
  $("#nav_toggle").removeClass("active");
});
→ Ссылка
Автор решения: Дмитрий

Вроде нашёл решения сам... не знаю на сколько целесообразно.

$(function() {
        $(".phonecell").click(function(){
            var PhoneNumber = $(this).text();
            PhoneNumber=PhoneNumber.replace("Phone:","");
            window.location.href="tel://"+PhoneNumber;
        });
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table><tr><td class=phonecell>8(800)555-35-35</td></tr></table>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.