Php 如何使侧边栏与自定义javascript一起工作_Php_Laravel_Laravel 5

Php 如何使侧边栏与自定义javascript一起工作

php laravel laravel-5

Php 如何使侧边栏与自定义javascript一起工作,php,laravel,laravel-5,Php,Laravel,Laravel 5,我有一个侧边栏菜单，我正试图与Laravel PHP应用程序集成。当我运行应用程序时，侧边栏在显示页面上显示良好，但当应用程序运行时，动画、下拉列表和切换不起作用 HTML没有问题： <div id="wrapper"> <div class="overlay"></div>  <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wr

我有一个侧边栏菜单，我正试图与Laravel PHP应用程序集成。当我运行应用程序时，侧边栏在显示页面上显示良好，但当应用程序运行时，动画、下拉列表和切换不起作用

HTML没有问题：

<div id="wrapper">
<div class="overlay"></div>

<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
    <ul class="nav sidebar-nav">
        <li class="sidebar-brand">
            <a href="#">
                Brand
            </a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Events</a>
        </li>
        <li>
            <a href="#">Team</a>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Works <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
                <li class="dropdown-header">Dropdown heading</li>
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Services</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
        <li>
            <a href="https://twitter.com/maridlcrmn">Follow me</a>
        </li>
    </ul>
</nav>
<!-- /#sidebar-wrapper -->

<!-- Page Content -->
<div id="page-content-wrapper">
    <button type="button" class="hamburger is-closed" data-toggle="offcanvas">
        <span class="hamb-top"></span>
        <span class="hamb-middle"></span>
        <span class="hamb-bottom"></span>
    </button>
</div>
<!-- /#page-content-wrapper -->

Javascript是程序中不起作用的部分

$(document).ready(function () {
var trigger = $('.hamburger'),
    overlay = $('.overlay'),
    isClosed = false;

trigger.click(function () {
    hamburger_cross();
});

function hamburger_cross() {

    if (isClosed == true) {
        overlay.hide();
        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
    } else {
        overlay.show();
        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
    }
}

$('[data-toggle="offcanvas"]').click(function () {
    $('#wrapper').toggleClass('toggled');
});
});

这是我的Laravel应用程序中master.blade.php文件的代码

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ URL::asset('src/css/app.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('src/css/components/sidebar.css') }}">
</head>
<body>
    <div class="container">
        <header class="row">
            @include('layouts.partials.sidebar')
        </header>
        <div id="main" class="row">
            @yield('content')
        </div>
    </div>

    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="{{ URL::asset('src/js/app.js') }}"></script>
    <script src="{{ URL::asset('src/script-components/sidebar.js') }}"></script>
</body>
</html>


@收益率（‘所有权’）
@包括（'layouts.partials.sidebar'）
@产量（‘含量’）

如何组织master.blade.php文件中的javascript文件以使边栏正常工作

你能给我们一个实时的fiddle或网站来检查吗？javascript控制台中有什么？这里是一个指向jsfiddle环境的链接：fiddle环境用于我的侧栏。我还想自定义侧边栏，但要确保这段代码正常工作。

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ URL::asset('src/css/app.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('src/css/components/sidebar.css') }}">
</head>
<body>
    <div class="container">
        <header class="row">
            @include('layouts.partials.sidebar')
        </header>
        <div id="main" class="row">
            @yield('content')
        </div>
    </div>

    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="{{ URL::asset('src/js/app.js') }}"></script>
    <script src="{{ URL::asset('src/script-components/sidebar.js') }}"></script>
</body>
</html>