jquery function does not work

Question

jquery function does not work

Navigation

#1 by (3 votes)

0

CSS:

.nav {
    width: 15%;
    height: 800px;
    background-color: #421;
    margin-top: 55px;
    float: left;
}
.nav-min {
    width: 5% !important;
    background-color: #ccc !important;
}

JS:

<script src="http://code.jquery.com/jquery-2.2.3.min.js"></script><scripttype="text/javascript">
    $('#btn').click(function() {
            $('.nav').toggleClass('nav-min');
        });
</script>

HTML:

<nav class="nav">
    <button class="btn btn-menu" id="btn">Menu</button>     
</nav>

Here are tests that I did and they worked link

But it did not run on localhost, does anyone know what it might be? I've already checked if it's saving, but it still does not work at all.

javascript html jquery css

asked by anonymous 04.05.2016 / 04:24

1 answer

How do I click the menu, scroll the page to the corresponding div? Load HTML pages into a div [duplicate]

score 3 · Accepted Answer

On the localhost you must have placed the same order as the question. That means:

<script type="text/javascript">
   $('#btn').click(function() {
        $('.nav').toggleClass('nav-min');
   });
</script>

It's first of that.:

<nav class="nav">
   <button class="btn btn-menu" id="btn">Menu</button>     
</nav>

So it's not working. 2 Ways to Overcome

Put the script at the end of the folder

Change to.:

<script type="text/javascript">
  $(document).ready(function(){
     $('#btn').click(function() {
        $('.nav').toggleClass('nav-min');
     });
  });
</script>