Function jquery does not work

Asked

Viewed 2,792 times

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>    
<script type="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 I did and they worked http://jsfiddle.net/ukpm1uey/3/

but it didn’t run on the localhost, does anyone know what it might be? , I’ve checked if it’s saving, but it still doesn’t work at all

javascript jquery html css

  • In jsFiddle it is working! What is your goal or what you are trying to do to say it is not working?

  • Matheus, still very difficult to understand what your problem is, could you edit your question by adding more information? When you have a read time here -> http://answall.com/help/mcve

  • So, I wanted to make a menu that decreases when I click on the button, but my code is not working :/, I built the jsFiddle code but it does not work in my code and it is practically clean

  • are you sure you put a link tag with the initial css there ? in jsfiddle, just put it in the window, but in localhost you need a tag including css

1 answer

3


In localhost you must have put it in the same order you asked the question. That means.:

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

Is before.:

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

So it’s not working.
2 ways to overcome

  1. Place the script at the end of the folder

  2. Change to.:

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

  • Thank you very much to everyone who helped, it worked :P

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.