Dropdown Menu for Small Screens not linking well

I have my menu as:

<nav> 
    <ul> 
        <li>
            <a href="#">Home</a>
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li> 
        <li><a href="#books">Books</a></li> 
        <li><a href="#blog">Blog</a>
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </li> 
        <li><a href="#about">About Us</a></li> 
        <li><a href="#support">Support</a></li> 
    </ul>
</nav>

and a supporting JQuery to help fire the functionality as:

$(function() {
    // Create the dropdown base
    $("<select />").appendTo("nav");
    // Create default option "Go to..."
    $("<option />", {
        "selected": "selected",
        "value": "",
        "text": "Go to..."
    }).appendTo("nav select");
    // Populate dropdown with menu items
    $("nav > ul > li").each(function() {
        var el = $(this);
        var hasChildren = el.find("ul"),
                children = el.find("li");
        if (hasChildren.length) {
            $("<optgroup />", {
                "label": el.find("> a").text()
            }).appendTo("nav select");
            children.each(function() {
                $("<option />", {
                    "text": " - " + $(this).text()
                }).appendTo("optgroup:last");
            });
        } else {
            $("<option />", {
                "value": el.attr("href"),
                "text": el.text()
            }).appendTo("nav select");
        }
    });
    // To make dropdown actually work
    $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
    });
});

The problem here is that when I select any of the menus it does not link properly. The returned URL on the browser is eg www.example.com/One instead of www.example.com/#

Can someone tell me what's wrong with my code.

Answers


The problem is that you're using .text() to get the contents of an a element. For example:

el.find("> a").text()

Instead of text, use attr("href"), as in:

el.find("> a").attr("href");

Per jQuery documentation: The result of the .text() method is a string containing the combined text of all matched elements.

Now, I've created a JSFiddle to test your code out, and this will make it work:

$(function() {
    // Create the dropdown base
    $("<select />").appendTo("nav");
    // Create default option "Go to..."
    $("<option />", {
        "selected": "selected",
        "value": "",
        "text": "Go to..."
    }).appendTo("nav select");
    // Populate dropdown with menu items
    $("nav > ul > li").each(function() {
        var el = $(this);
        var hasChildren = el.find("ul"),
                children = el.find("li");
        if (hasChildren.length) {
            $("<optgroup />", {
                "label": el.find("> a").text()
            }).appendTo("nav select");
            children.each(function() {
                console.log($(this).find("> a").attr("href"));
                $("<option />", {
                    "text": " - " + $(this).text(), 
                    "value": $(this).find("> a").attr("href")
                }).appendTo("optgroup:last");
            });
        } else {
            $("<option />", {
                "value": el.find("> a").attr("href"),
                "text": el.text()
            }).appendTo("nav select");
        }
    });
    // To make dropdown actually work
    $("nav select").change(function() {
        //console.log($(this).find("option:selected").val());
        window.location = $(this).find("option:selected").val();
    });
});

You can test and play around with the JSFiddle too.

There were also some .find("> a") missing from the previous version.


Need Your Help

strip certain character from lines in a textfile

file awk

I have a text file (generated by a script each week) with multiple lines, where I'd like to strip out certain characted, that differ each week. The files can look something like this;

Pushing JAR to Cloud Foundry fails when it contains .profile.d scripts

cloudfoundry buildpack

I have Java Spring Boot application packed with Gradle using assemble task. When I push its jar to CF it works just fine - deploys and starts.