如何将JS从HTML实现到WordPress？

Question

Recently, I'm really interested in building WordPress template. I started doing it, but I am really stuck now. The thing is, i have HTML file of my frontpage (index.html), and the CSS and JS all in their folders. Now, I can't seem to find a way to make the JS work on WordPress platofrm, like its working on HTML.

I only want to make that menu work, don't mind the other bugs.

http://brainstorm.comoj.com/ -- HTML

http://bsarafimov21.byethost16.com/ -- WordPress

Here is the code i want to transfer from HTML to WordPress:

<script type="text/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');
        });
    });
</script>

Answer 1

Your javascript code working correctly but your html structre different than source.

Add this code between HEAD tag.

<link id="custom-css" rel="stylesheet" type="text/css" href="http://brainstorm.comoj.com/css/custom.css" media="all">

Add these lines into #wrapper div.

<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
        <ul class="nav sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                   v <small>0.0.1</small>
                </a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-home"></i> Home</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-fw fa-plus"></i> Male <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li class="dropdown-header">Male clothes</li>
                <li><a href="male/shirts.html">Shirts</a></li>
                <li><a href="#">T-Shirts</a></li>
                <li><a href="#">Trousers</a></li>
                <li><a href="#">Hats</a></li>
                <li><a href="#">Belts</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Female <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li class="dropdown-header">Female clothes</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="#"><i class="fa fa-fw fa-cog"></i> Third page</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> Dropdown <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="#"><i class="fa fa-fw fa-bank"></i> Page four</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-dropbox"></i> Page 5</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-fw fa-twitter"></i> Last page</a>
            </li>
        </ul>
    </nav>

By the way. You dont need to add text/script attribute. Browser defaults text/script for script tag and text/css for link tag.