To access the link, simply click once if there is no child menu. However, if there is a child menu attached, be sure to click

I am working on a mobile menu that is designed to slide out when clicked.

Currently, the parent pages are displayed by default. I want to implement functionality where if a parent page has child pages, clicking on it will slide down the sub menu. If clicked again, it should navigate to the parent page. However, if the parent page does not have any child pages, it should directly link through.

I have written some code for this purpose, but I suspect there may be a few bugs in it. Any assistance would be greatly appreciated :)

if($(".mob-navigation > ul > li > a").next(".sub-menu").length) {
  $(this).one("click", true);
} else {
  $(this).one("click", true);
}
javascriptjqueryhtmlcss

Answer №1

Without seeing the specific structure of your HTML, it is difficult to provide you with exact code. However, one approach could be to determine if the sub-menu is currently visible. If it is visible, navigate to the parent page; otherwise, display the sub-menu.

Answer №2

            $(document).ready(function (){
                $("#subnav").parent("li").addClass("hassub");
                $("#subnav").parent("li").append("<div class='overlay'></div>");
                $(".hassub").click(function (){
                    $("#subnav").toggle();
                    $(".overlay").toggle();
                });
            });
ul{
                list-style: none;
                width: 150px;
            }
            li{
                padding: 5px 10px;
                height: 15px;
                background: #cccccc;
                margin: 1px 0;
            }
            li.hassub{
                height: auto;
                position: relative;
                background: #bbbbbb;
            }
            a{
                color: black;
                text-decoration: none;
            }
            #nav{
                
            }
            #subnav{
                display: none;
                
            }
            .overlay{
                height: 25px;
                content: " ";
                width: 100%;
                background: rgba(255,0,0,.3);
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="http://softdesigns.in/">About</a>
                <ul id="subnav">
                    <li><a href="https://www.google.co.in">Personal</a></li>
                    <li><a href="http://stackoverflow.com/">Professional</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>

Feel free to test this code snippet. It should fit your needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The variable "Set" cannot be found in the react.js code, specifically in Safari browser

An issue has been identified in Safari where a ReferenceError is thrown: "Can't find variable: Set" when using react.js. This error occurs only in Safari, while all other browsers work perfectly fine. The error message points to the main.js file which ...

javascriptreactjs

Tips for managing the most recent keyup event in a search feature

I have a search input on my website. Whenever a user types a letter in it, an ajax request is made to display some content as the result. My goal is to only create an ajax request for the last keyup event when the user types quickly. I came across a soluti ...

javascriptjqueryajax

What is the reason for using <div class="clear"></div> instead of <div class="clear"/>?

It dawned on me that: <div class="clear"/> can wreak havoc on the layout after a sequence of floating divs, whereas <div class="clear"></div> works perfectly fine. Does anyone have an explanation for this? Here is the CSS being used ...

htmlcsscss-float

Highcharts Maps - Circular zoom controls

Currently implementing the Highcharts API for a special project. All features are functioning well except for one issue. I am looking to make the zoom in/out buttons appear rounded. I have attempted using border-radius with 50%, as well as modifying the r ...

javascripthighcharts

What is preventing the text of the elements from being updated?

My attempt to use JavaScript to change the text of this element has not been successful. The header I am trying to modify is enter image description here var elem = document.getElementsByClassName("headertext"); elem.innerHTML = "hello world"; <ul cl ...

javascripthtml

What is the best way to display all checked checkboxes even when the page is reloaded?

I am facing an issue with my website - it is using JavaScript to search for checked checkboxes. $(function () { var $allELements = $('.input-box'); var $selectedElementsListing = $('#selectedElements'); var $selec ...

javascriptjqueryhtmlarrayscheckbox

rating-widget not displaying when performing an ajax request

Having an issue with the star rating plugin () while using an ajax function for searching and filtering. The star rating displays correctly when the page initially loads https://i.stack.imgur.com/eaOmu.png However, when utilizing the filter and search fu ...

javascriptajax

What is the purpose of mapping through Object.keys(this) and accessing each property using this[key]?

After reviewing this method, I can't help but wonder why it uses Object.keys(this).map(key => (this as any)[key]). Is there any reason why Object.keys(this).indexOf(type) !== -1 wouldn't work just as well? /** * Checks if validation type is ...

javascriptarraystypescript

Incorporate row numbering feature into jQuery DataTables

Is there a way to have jQuery datatables generate a row number column in the first column, similar to a datagrid in VB? This is what I'm aiming for: If you have any insights on how this can be achieved, please share! ...

jqueryhtmldatatables

invoking a function by utilizing nested controllers

Struggling with nested controllers, the main goal of this code is to link data extracted from a .json file to another function or file. .html file: <div ng-app="myApp" ng-controller="GetCtrl" > <li ng-controller="ChannelCtrl" ng-repeat="x in ...

javascriptangularjshtml

Problems with Bootstrap affix scrolling in Internet Explorer and Firefox

I'm encountering an issue with the sidebar on my website. I've implemented Bootstrap affix to keep it fixed until the end of the page, where it should move up along with the rest of the content at a specific point... Everything seems to be worki ...

javascriptjquerycsstwitter-bootstrapaffix

What is the best way to secure the installation of python packages for long-term use while executing my code within a python shell on NodeJS?

I have been encountering difficulties while attempting to install modules such as cv2 and numpy. Although I have come across a few solutions, each time the shell is used the installation process occurs again, resulting in increased response times. Below i ...

javascriptpythonnode.jsexpressweb-development-server

Comparing form submission with a button click to pass data using Ajax - success in one method but failure in the other

I am facing an issue with two pieces of jquery code in my Flask application. While one works perfectly, the other is not functioning as expected. Both the form and a button trigger the same function through ajax calls. Currently, for troubleshooting purpos ...

javascriptjquerypythonajaxflask

What is the best way to eliminate a duplicate item from the shopping cart without actually deleting it?

I developed an e-commerce platform with a cart feature using the context API. However, I encountered an issue where removing one item from the cart also deletes another item if there are two of the same items in the cart. How can this be prevented? Below ...

javascriptreactjs

The integration between Javascript, PHP, and SQL Server does not display the retrieved data

I am a beginner in PHP and have limited knowledge of Javascript. I am attempting to create a chronometer where the time limit is retrieved from a SQL SERVER database. However, when I assign the value obtained in PHP to a Javascript variable, it returns -1. ...

javascriptphpjsonsql-server

Bringing in More Blog Posts with VueJS

Exploring the Wordpress API and devising a fresh blog system. As a newbie to VueJS, I'm intrigued by how this is handled. The initial blog posts load as follows: let blogApiURL = 'https://element5.wpengine.com/wp-json/wp/v2/posts?_embed&p ...

javascriptvue.jsvuejs2vue-component

Update the form action URL when a specific option is selected from the dropdown menu upon clicking the submit

I would like my form to redirect to a specific page on my website based on the selection made in the <select> tag. For instance, if '2checkout' is selected, it should go to gateways/2checkout/2checkout.php. Similarly, if 'Payza' i ...

javascriptphpjqueryhtmlforms

The error message "No native build was found for M2 MacBook" appeared while using npm with Node

I encountered this issue while working on my M2 MacBook, which ran smoothly on my older Intel MacBook. Any insights on what might be causing the problem? Using bun, but even running npm run dev (node 18) results in the same error. The same error has also ...

javascriptnode.jsnpmapple-m1apple-silicon

What is the process for altering the color of an HTML output depending on its values?

I created a simple HTML code to showcase some outcomes. The possible results are SUCCESS, Failure, and Still Failing. I want these results to be displayed with corresponding colors, such as green for SUCCESS, and red for both Failure and Still Failing. I ...

javascriptjqueryhtmlcss

I require assistance in understanding how to successfully implement ParseINT with (row.find)

enter image description hereHow To Utilize ParseINT Using row.find(). I Attempted This Code But It Doesn't Work. This is My Code : function update_qty() { var row2 = $(this).parents('.item-row'); var price2 = row2.find(parseInt($ ...

javascriptjqueryhtml