Jquery事件在我的模板html中不起作用

Question

我对测试项目的问题感到非常困惑。这是我从提供免费模板的网站获得的免费模板。我下载了它，我试图将它与Angularjs混合，但我无法使用单击时显示开/关的菜单按钮。我尝试了网上的几种解决方案，我认为可以解决问题，但没有运气。

模板HTML

<div class="menu">                                              
  <a href="" class="right_bt" id="activator"><img src="img/landing/menu.png" alt=""/></a>
    <div class="box" id="box">
      <div class="box_content">
        <div class="menu_box_list">
          <ul>
            <li class="active act"><a class="hvr-underline-from-center scroll" href="index.html">Home</a></li>
            <li><a href="#about" class="hvr-underline-from-center scroll">About</a></li>
            <li><a href="#services" class="hvr-underline-from-center scroll">Services</a></li>

 <!-- some other codes -->

 <script type="text/javascript">
   $('.menu').on('click', '#activator', function() {
      console.log("click");
   });
   var $ = jQuery.noConflict();
   $(function() {
      $('#activator').click(function(){
        $('#box').animate({'top':'0px'},500);
      });

      $('#boxclose').click(function(){
        $('#box').animate({'top':'-700px'},500);
      });
   });
   $(document).ready(function(){
     //Hide (Collapse) the toggle containers on load
     $(".toggle_container").hide(); 

     //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
     $(".trigger").click(function(){
       $(this).toggleClass("active").next().slideToggle("slow");
       return false; //Prevent the browser jump to the link anchor
     });
  });
</script>

script位于template html的内部，template html在使用state激活特定ui-router时被调用。