0

При открывание бургера, открывается меню. дальше при нажимании на 'пункт', оно скролит до этого пункта(это делает другой 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>

2
  • может присвоить этому пункту меню id и скриптом обрабатывать этот id по клику - ссылка на tel:
    – Denis I
    12 ноя 2020 в 7:53
  • Denis, спасибо за идею. Я просто совсем не силён в JS, поэтому не знаю как это реализовать... 12 ноя 2020 в 8:00

3 ответа 3

0

Можно по закрытии проверять есть ли конкретный класс у ссылки, напр. 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>

1
  • Спасибо. не плохо. На компьютере оно не закрывает, когда нажимаю, но по прежнему не работает как надо(не звонит). ...А на телефоне закрывает(и соответственно не звонит) 12 ноя 2020 в 10:26
0

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");
});
3
  • спасибо. Но что то не получилось данным способом. 12 ноя 2020 в 10:25
  • @Дмитрий, посмотрите у вас так jsfiddle.net/0b2m4ncd
    – i.prikot
    12 ноя 2020 в 10:32
  • @i.prikot Спасибо большое. вроде работает корректно. if (event.target.href.indexOf('#') > -1) { как это вообще работает, мне интересно. 13 ноя 2020 в 8:34
0

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

$(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>

Ваш ответ

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

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