Why my jQuery is not Working that is in HTML page?

Question

2.00/5 (1 vote)

See more:

i am creating dropdown menu,and when i hover on List Item 'Dashboard' and 'About Us' it will not toggle it's Submenus. And i am toggling submenu by using jQuery

HTML Page Code
===================================================================

XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="aStyle.css" type="text/css" rel="stylesheet" />
<!--<script src="jQuery.js" type="text/javascript"  /> -->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('ul>li').hover(function() {
        $(this).find('ul>li').show(3000);
    });
});
</script>
</head>

<body>
        <div class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Dashboard</a>
                    <ul>
                        <li><a href="#">Menu 1</a></li>
                        <li><a href="#">Menu 2</a></li>
                        <li><a href="#">Menu 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Company</a></li>
                <li><a href="#">About Us</a><ul>
                        <li><a href="#">Menu 1</a></li>
                        <li><a href="#">Menu 2</a></li>
                        <li><a href="#">Menu 3</a></li>
                    </ul>
                </li>
            </ul>
    </div>
</body>
</html>

===================================
CSS Code
====================================

CSS

@charset "utf-8";
/* CSS Document */
body{
    background-color:#CCC;
    margin:0 auto;
    clear:both;
    width:70%;
}
a{
    text-decoration:none;
}
.nav ul{
    list-style:none;
    margin:0;
    padding:0;
}
.nav ul li{
    float:left;
    width:120px;
    list-style:none;
    height:30px;
    text-align:center;
    line-height:30px;
    background-color:#FF0000;
}
.nav ul li a{
    color:#CCCCCC;
    text-decoration:none;
}

.nav ul li li{
    background-color:#ff0000;
    margin-bottom:2px;
    display:none;
}

.nav ul li li a{
    text-decoration:none;
}
.nav ul li li:hover{
    background-color:#09F;
}

==============================================

Posted 27-Jul-14 21:40pm

Pratiik Miistry

Updated 27-Jul-14 21:59pm

v3

Add a Solution

Comments

Sergey Alexandrovich Kryukov 28-Jul-14 3:42am

You really need t explain what you tried to achieve and what is "not working".
—SA

Pratiik Miistry 28-Jul-14 4:00am

i am creating dropdown menu,and when i hover on List Item 'Dashboard' and 'About Us' it will not toggle it's Submenus. And i am toggling submenu by using jQuery and jQury is not working.

Raje_ 28-Jul-14 10:30am

Can you make sure your jquery-1.9.1.js file is available in js folder in your root directory?

6 solutions

Solution 7

Thank You So much guys............ you solved it.... (y)

Posted 28-Jul-14 6:59am

Pratiik Miistry

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vfleitao · Accepted Answer · 2014-07-27T23:25:00

Your selector is wrong.

$('ul>li').hover(function() {
  $(this).find('ul>li').show(3000);
});

Your targets all li inside uls, this includes the first levels.
For second levels try using this one (it worked when i used it with your html)

$('.nav ul>li').hover(function() {
   $(this).find('ul>li').show(300);
});

also, you might want to use a jquery version that is not on your server to make sure it is always available like

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

or one of microsofts
http://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0[^]

Peter Leow · Accepted Answer · 2014-07-28T03:44:00

Solution 4

$('ul > li').hover(function() {
    $(this).find('ul > li').toggle();
});

Posted 28-Jul-14 3:44am

Peter Leow

Member 10945858 · Accepted Answer · 2014-07-28T04:23:00

You should use a tooltip that will provide a short description that is linked to another control or object. Tooltips will help the users to understand unfamiliar objects that aren't described directly in the UI. They will be displayed automatically when the user presses and holds or hovers the mouse pointer over a control such a buttons, textfields and hyperlinks

Raje_ · Accepted Answer · 2014-07-28T04:40:00

I have modified your code. Hope it works for you :

Head Section :

HTML

<link href="aStyle.css" type="text/css" rel="stylesheet" />
  <script src="JScript/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("nav ul li").hover(function () {
                if ($("> ul", this).length > 0) {
                    $("> ul", this).show();
                }
            }, function () {
                if ($("> ul", this).length > 0) {
                    $("> ul", this).hide();
                }
            });
        });
    </script>

Body Section :

HTML

<nav>
               <ul>
                   <li><a href="#">Home</a></li>
                   <li><a href="#">Dashboard</a>
                       <ul>
                           <li><a href="#">Menu 1</a></li>
                           <li><a href="#">Menu 2</a></li>
                           <li><a href="#">Menu 3</a></li>
                       </ul>
                   </li>
                   <li><a href="#">Company</a></li>
                   <li><a href="#">About Us</a><ul>
                       <li><a href="#">Menu 1</a></li>
                       <li><a href="#">Menu 2</a></li>
                       <li><a href="#">Menu 3</a></li>
                   </ul>
                   </li>
               </ul>
           </nav>

And finally your css :

CSS

@charset "utf-8";
/* CSS Document */
body {
    background-color: #CCC;
    margin: 0 auto;
    clear: both;
    width: 70%;
}

a {
    text-decoration: none;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .nav ul li {
        float: left;
        width: 120px;
        list-style: none;
        height: 30px;
        text-align: center;
        line-height: 30px;
        background-color: #FF0000;
    }

        .nav ul li a {
            color: #CCCCCC;
            text-decoration: none;
        }

      li ul {
            background-color: #ff0000;
            margin-bottom: 2px;
            display: none;
        }

            .nav ul li li:hover {
                background-color: #09F;
            }

Good luck.

Vfleitao · Accepted Answer · 2014-07-27T23:59:00

I used this html, its yours but everything inlined and the js from google

XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<style>
@charset "utf-8";
/* CSS Document */
body{
    background-color:#CCC;
    margin:0 auto;
    clear:both;
    width:70%;
}
a{
    text-decoration:none;
}
.nav ul{
    list-style:none;
    margin:0;
    padding:0;
}
.nav ul li{
    float:left;
    width:120px;
    list-style:none;
    height:30px;
    text-align:center;
    line-height:30px;
    background-color:#FF0000;
}
.nav ul li a{
    color:#CCCCCC;
    text-decoration:none;
}

.nav ul li li{
    background-color:#ff0000;
    margin-bottom:2px;
    display:none;
}

.nav ul li li a{
    text-decoration:none;
}
.nav ul li li:hover{
    background-color:#09F;
}
</style>
<!--<script src="jQuery.js" type="text/javascript"  /> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.nav ul>li').hover(function() {
        $(this).find('ul>li').show(300);
    });
});
</script>
</head>

<body>
        <div class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Dashboard</a>
                    <ul>
                        <li><a href="#">Menu 1</a></li>
                        <li><a href="#">Menu 2</a></li>
                        <li><a href="#">Menu 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Company</a></li>
                <li><a href="#">About Us</a><ul>
                        <li><a href="#">Menu 1</a></li>
                        <li><a href="#">Menu 2</a></li>
                        <li><a href="#">Menu 3</a></li>
                    </ul>
                </li>
            </ul>
    </div>
</body>
</html>

Why my jQuery is not Working that is in HTML page?

6 solutions

Solution 1

Solution 4

Solution 5

Solution 6

Solution 7

Solution 3

Add your solution here

Preview 0