1

Добрый день! Помогите, пожалуйста, разрешить конфликт двух скриптов. Первый скрипт работает успешно, если удаляю второй. Если второй скрипт добавляю, то первый перестает работать. В чем может быть конфликт? Вот рабочий пример: https://codepen.io/LADYX/pen/aWZPdE Благодарю! Первый скрипт:

$(document).ready(function() {
$('.navbar > ul > li.submenu > a').append('<span class="submenu-button"></span>');
$('.toggleMenu').click(function(e){
$('.navbar > ul').slideToggle();
    e.preventDefault();
});
$('.submenu > ul > li').click(function(e){
    e.stopPropagation();
});
$('.submenu').click(function(e){
    if($(this).hasClass('active')){
        $('.navbar > ul > li').removeClass('active');
        $('.navbar > ul > li > ul').slideUp();
    }else{
        $('.navbar > ul > li').removeClass('active');
        $('.navbar > ul > li > ul').slideUp();
        $(this).addClass('active');
        $(this).find('ul').stop().slideToggle();
    e.stopPropagation();
    }
        $('.navbar > ul > li').removeClass('submenu_open');
        $(this).addClass('submenu_open');
});
$('body, html').click(function(){
    $('.navbar > ul > li').removeClass('active submenu_open');
    $('.navbar > ul > li > ul').slideUp(1);
});
});

Второй скрипт:

$(document).ready(function(){
    $('a[href^="#"], a[href^="."]').click( function(){
        var scroll_el = $(this).attr('href');
        if ($(scroll_el).length != 0) {
        $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 500);
        }
        return false;
    });
});
2
  • html код можно ?
    – NeedH8
    23 апр 2017 в 11:25
  • 1
    Используйте кнопку "Фрагмент кода" (Ctrl+M) для добавления кода. Сообщение должно быть самодостаточным, ссылки на Codepen и подобные ресурсы могут служить только дополнением. 23 апр 2017 в 12:31

1 ответ 1

1

Убираем return false; из второй функции и пишем e.preventDefault(); все работает.

href=# ссылка-заглушка. При клике на нее произойдет перемещение на самый верх текущей страницы. Но, если использовать preventDefault - то действия браузера по умолчанию будут отменены и переброса вверх не будет.

$(document).ready(function() {
  $('.navbar > ul > li.submenu > a').append('<span class="submenu-button"></span>');

  $('.toggleMenu').click(function(e) {
    //console.log('.toggleMenu');
    $('.navbar > ul').slideToggle();
    e.preventDefault();
  });

  $('.submenu > ul > li').click(function(e) {
    //console.log('.submenu > ul > li');
    e.stopPropagation();
  });

  $('.submenu').click(function(e) {
    //console.log('.submenu');
    if ($(this).hasClass('active')) {
      $('.navbar > ul > li').removeClass('active');
      $('.navbar > ul > li > ul').slideUp();
    } else {
      $('.navbar > ul > li').removeClass('active');
      $('.navbar > ul > li > ul').slideUp();
      $(this).addClass('active');
      $(this).find('ul').stop().slideToggle();
      e.stopPropagation();
    }
    $('.navbar > ul > li').removeClass('submenu_open');
    $(this).addClass('submenu_open');
  });

  $('body, html').click(function() {
    //console.log('body, html');
    $('.navbar > ul > li').removeClass('active submenu_open');
    $('.navbar > ul > li > ul').slideUp(1);
  });

  $('a[href^="#"], a[href^="."]').click(function(e) {
    var scroll_el = $(this).attr('href');
    if ($(scroll_el).length != 0) {
      $('html, body').animate({
        scrollTop: $(scroll_el).offset().top
      }, 500);
    }
    e.preventDefault(); // вот так
  });

});
.navbar {
  position: relative;
  width: 100%;
  font-size: 12px;
  text-transform: uppercase;
}

.navbar :before,
.navbar :after {
  content: "";
  display: table;
}

.navbar :after {
  clear: both;
}

.navbar>ul {
  position: relative;
}

.navbar>ul {
  padding: 0;
  margin-top: 0px;
}

.navbar>ul:after {
  content: "";
  clear: both;
  display: block;
}

.navbar>ul>li {
  float: left;
  position: relative;
  border-right: 1px solid #eaeaea;
  width: 20%;
  text-align: center;
}

.navbar>ul>li>ul {
  width: 100%;
}

.navbar>ul>li a {
  display: block;
  padding: 20px;
  color: #333;
  text-decoration: none;
}

.navbar>ul>li:hover,
.navbar>ul>.submenu.submenu_open {
  background: #fff;
  cursor: pointer;
}

.navbar>ul>li:hover a,
.navbar>ul>.submenu.submenu_open {
  color: #333;
}

.navbar .submenu-button {
  float: right;
  position: relative;
  padding-left: 5px;
}

.navbar .submenu-button::before,
.navbar .submenu-button::after {
  content: '';
  display: block;
  position: absolute;
  background: #333;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.navbar .submenu-button::before {
  top: 5px;
  width: 9px;
  height: 1px;
}

.navbar .submenu-button::after {
  left: 9px;
  top: 1px;
  width: 1px;
  height: 9px;
}

.navbar>ul>li:hover .submenu-button::before,
.navbar>ul>li:hover .submenu-button::after,
.navbar .active .submenu-button::before,
.navbar .active .submenu-button::after {
  background: #333;
}

.submenu.submenu_open a {
  color: #333;
}

.submenu_open .submenu-button::after,
.submenu_open .submenu-button::before {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.toggleMenu {
  display: none;
  position: relative;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  padding: 20px;
  background-color: #f1f1f1;
  color: #333;
  cursor: pointer;
}

.toggleMenu::after,
.toggleMenu::before {
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  width: 15px;
}

.toggleMenu::after {
  top: 20px;
  height: 2px;
  background: #000000;
}

.toggleMenu::before {
  top: 25px;
  height: 3px;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

.submenu>ul {
  display: none;
  position: absolute;
  padding: 0;
  top: 100%;
  background: #fff;
}

.submenu>ul>li {
  float: none;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
}

.submenu>ul>li a {
  padding: 15px 20px;
  color: #fff;
}

.submenu>ul>li a:hover {
  background: #f1f1f1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <div class="toggleMenu">Меню</div>
  <ul>
    <li class="submenu"><a href="#">Меню1</a>
      <ul>
        <li><a href="#">Меню11</a></li>
        <li><a href="#">Меню11</a></li>
        <li><a href="#">Меню11</a></li>
      </ul>
    </li>
    <li class="submenu"><a href="#">Меню2</a>
      <ul>
        <li><a href="#">Меню22</a></li>
        <li><a href="#">Меню22</a></li>
        <li><a href="#">Меню22</a></li>
      </ul>
    </li>
  </ul>
</div>

Кстати, стоит отметить, что функция, определенная в пределах одного $(document).ready блока не может быть вызвана из другого $(document).ready блока. Никто не запрещает использовать несколько $(document).ready блоков, но это ухудшает читаемость кода, на мой взгляд. И еще одно - блоки будут выполнены по очереди, сверху вниз по коду.

4
  • 1
    @LADYX вместо return false пишите e.preventDefault()
    – zb'
    23 апр 2017 в 13:35
  • 1
    codepen.io/anon/pen/pPbGJa
    – zb'
    23 апр 2017 в 13:38
  • 1
    @zb', да-да, вы правы. Внес правку в ответ ) 23 апр 2017 в 13:39
  • 1
    @LADYX, href=# ссылка-заглушка. При клике на нее произойдет перемещение на самый верх текущей страницы. Но, если использовать preventDefault - то действия браузера по умолчанию будут отменены и переброса вверх не будет. 23 апр 2017 в 13:51

Ваш ответ

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

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