Home/ Questions/Q 8366147
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T12:50:33+00:00

Hey guy’s I can’t figure out why my code doesn’t work when I have

  • 0

Hey guy’s I can’t figure out why my code doesn’t work when I have nested elements…

Here’s my html code

<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="head.js"></script>
    <title>Test Page</title>
    <link rel="stylesheet" type="text/css" href="mock.css"
    />
</head>
<body>
    <div id="subMenu">
        <ul>
            <li class="button boxshadow">
                <a class="subnav" href="#">Test</a>
                <ul>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Testing</a>
                    </li>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Tested</a>
                    </li>
                </ul>
            </li>
            <li class="button boxshadow">
                <a class="subnav" href="#">Works</a>
            </li>
            <li class="button boxshadow">
                <a class="subnav" href="#">Other</a>
                <ul>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Other</a>
                    </li>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Other</a>
                    </li>
                </ul>
            </li>
            <li class="button boxshadow">
                <a class="subnav" href="#">Last</a>
                <ul>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Last1</a>
                    </li>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Last2</a>
                    </li>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Last3</a>
                    </li>
                    <li class="button boxshadow">
                        <a class="subnav" href="#">Last4</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

my CSS

.button {
    background: url(images / button.jpeg) no - repeat;
    background - size: 100 % ;
    position: relative;
    display: block;
    float: left;
    width: 165px;
    text - align: center;
    left: 25px;
    margin: 5px 10px;
}

and my javascript/jquery

$(document).ready(function() {
    $('.button').bind("mouseover", function() {
        $(this).css("box-shadow", "0 0 10px 5px #B6B6B6");

        if ($(this).text().toLowerCase() == "test".toLowerCase()) {
            a = "blah."
            b = "blah."
            c = "blah."
            d = "blah."
            e = "blah."
            f = "blah."

            handle(a, b, c, d, e, f);
        }
        if ($(this).text().toLowerCase() == "works".toLowerCase()) {
            a = "blah"
            b = "blah."
            c = "blah"
            d = "blah"
            e = "Blah"
            f = "Blah"

            handle(a, b, c, d, e, f);
        }

        $(this).bind("mouseout", function() {
            $(this).css("box-shadow", "5px 5px 10px #070707");
        })
    })
})​

So from this everything is working expect when i have sub items in my list like in “test” which has 2 sub lists, my if statement will work on “test if I remove the sub list exactly like “works”. As soon as I add sub items to my main list my if statement stops working even though I know the mouseover is working cause it is working the .css part of the code..

Any ideas on what’s happening here would be greatly appreciated.. I am new to JQuery and am moving my site to it rather than java script. thx

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I am not sure you can use .toLowerCase() directly on a string as it is a function part of the String object.

    Thus, you know exactly its value since you hard code it, why using this function on the right part of the equation?

    if ($(this).text().toLowerCase() == "test")

    should solve your problem, to test it out you should try console.log(your condition).

    EDIT

    Based on your comment and your code, it seems to be a matter of selector and/or html structure. You target .button which is applied to an li which contains more li items.
    You can “flatten” your html to the same level, or more simply, adapt your selector and classes.
    But I think the best approach is the following :

    $(this).find("a").first().text(); // or "a:first"

    There is probably something prettier but you can understand where this is going? Using .first() to prevent going into the sub li.

    • 0