Как разрешить конфликт двух скриптов?

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