Click function doesn't work in my JQuery

Question

$(document).ready(function(){
   $("#menu-trigger").click(function(){
    $("#menu").slideToggle();
    });
 });

#menu {
    width: 100%;
    height: 35px;
}
ul.topnav {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    background: blue;
}
ul.topnav li {
    float: left;
    margin: 0;
    padding: 0 10px 0 0;
    position: relative;
    background:blue;
}
ul.topnav li a {
    color:red;
    padding: 10px 5px;
    float: left;
    display:block;
    font-size: 12px;
    text-transform: uppercase;
    font-style: normal;
}
ul.topnav li a:visited, ul.topnav li a:active, ul.topnav li a:link {
    color: #fff;
    text-decoration: none;
}

ul.topnav li a:hover {
    background: violet;
    color:white;
}
ul.subnav{
    display:none;
	position:absolute;
	top:100%;
    padding:0;
}
ul.subnav li{
    list-style: none;
    float:left;
	width:100%;
}
ul.subnav a{
    line-height:120%;
	padding:10px 15px;
}

ul.topnav li:hover>ul.subnav{
	display:block
}
#menu-trigger{
    display:none;
}

 
@media screen and (max-width:600px){
     #menu{
         display:none;
     }
    #menu-trigger{
       display:block;
   }
    
     ul.topnav li{
        float:none;
    }
     ul.topnav li a{
        float:none;
        border-bottom:2px solid red;
    }
   
}

<span id="menu-trigger">MENU</span>
<div id="menu">
    <ul class="topnav">
        <li><a>Home</a>
        </li>
        <li><a>About Us</a>

            <ul class="subnav">
                <li><a>Introduction</a>
                </li>
                <li><a>History</a>
                </li>
                <li><a>Mission/Vision Statement</a>
                </li>
            </ul> 

        </li>
        <li><a>Basic Education</a>

            <ul class="subnav">
                <li><a>Introduction</a>
                </li>
                <li><a>The Basic Ed</a>
                </li>
                <li><a>About Basic Ed</a>
                </li>
            </ul> 

        </li>
        <li><a>IB</a>
        </li>
        <li><a>College</a>
        </li>
        <li><a>Contact Us</a>
        </li>
    </ul>
</div>

I can't find what seems to be the problem in my code specifically in jQuery. The click and slideToggle event wont work. What I want is when the screen reach its max-width, horizontal menu will no longer show, instead when you click on MENU slide-up and down will toggle resulting in vertical and mobile friendly navigation menu. I simply followed some tutorials in Youtube but it doesn't work on me.

Seems to work fine: jsfiddle.net/jppnmwz2 (Don't forget to resize the window to see the UI changes) — Rory McCrossan
– Rory McCrossan, Commented Mar 12, 2015 at 9:36
If you select a jQuery version from the menu at the top of the Snippet Editor, your code works. — Barmar
– Barmar, Commented Mar 12, 2015 at 9:37
Yeah it works fine in your codes Rory. What wrong with mine? $(document).ready(function() -- this part? — Red Gabanan
– Red Gabanan, Commented Mar 12, 2015 at 9:41
Wait. now it won't show when the screen width is greater than 600px? — Red Gabanan
– Red Gabanan, Commented Mar 12, 2015 at 9:44

gon250 · Accepted Answer · 2015-03-12 09:42:30Z

1

Try this:

$(document).ready(function(){
   $("#menu-trigger").on('click', function(){
      $("#menu").slideToggle();
    });
 });

here you can take a look how it's working when you click on the #menu-trigger link

answered Mar 12, 2015 at 9:42

gon250

3,5737 gold badges48 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Click function doesn't work in my JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related