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

Tips for eliminating the glowing effect when pressing down on the thumb of the material ui slider

Visit Material-UI documentation for Slider component. Despite setting the disabled flag for the entire slider, the thumb continues to show a halo effect when clicked. ...

javascripthtmlcssreactjsmaterial-ui

What are the downsides of using PHP redirects instead of JavaScript redirects, given that most large websites opt for the latter?

After closely examining the source codes of redirect pages on several major websites that redirect to their sponsors, I found an interesting pattern. Out of the five websites analyzed, four were using different Javascript redirects: <script type="text ...

javascriptphphttp-redirect

Creating mathematical formulas in JavaScript

How can the equation be translated into JavaScript? This is the proposed programming solution, but there seems to be an issue. var MIR = parseFloat(($('#aprrate').val() / 100) / 12); var paymentAmount = (MIR * $('#amounttofinance').va ...

javascript

The message I received when attempting to display the image and title from the JSON file was: "Error: Cannot read property 'image' of

<section id="panel"> <div class="container"> </div> </section> { "list": [{ "image": "cat.jpg", "name": "meow" }, { "image": "dog.jpg", "name": "woof" }, { "image": "sheep.jpg", ...

jqueryjsonajax

Enhance your Windows Media Player settings

I inserted a Windows Media Player on my webpage like this: <object id="mPlayer" classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" type="application/x-oleobject"> <embed name="mPlayer" pluginspage="http://www.microsoft.com/Windows/Medi ...

jquerywmp

error: cannot parse data with Jquery, AJAx, and JSON

Can you assist me with this issue: I am currently building a search page using PHP and attempting to fetch a specific record from a MySQL table through JQuery-AJAX-JSON. However, the problem I'm facing is that I do not receive any data from process.p ...

phpjquerymysqlajax

Difficulty encountered while integrating chart.js with Django using npm

Encountering an issue while using Chart.js in my Django project - when utilizing the NPM package, it fails to work. However, switching to the CDN resolves the problem seamlessly. Chart.js version 3.9.1 Below is a snippet from my project's index.html ...

javascriptdjangonpmchart.js

Execute an AJAX function to monitor a JSON response at intervals of 3 seconds

I'm looking to verify if my user has been updated from another system using JavaScript. Can anyone assist me in creating a function that can analyze a JSON response and determine if it is true or false? The URL /user/updatecheck/ provides a JSON res ...

javascriptajax

Set JSON Value Session

In the table, there is an option to edit certain entries using a button. I have developed a function that retrieves JSON data and populates the table with it. This process happens before any other actions. Once the data is loaded, my goal is to create a c ...

javascriptjqueryjson

Utilize the Bootstrap column push-pull feature on the mobile version of

https://i.stack.imgur.com/yTBIt.png When viewing the desktop version, div A is displayed at the top of the page. However, I would like to move it to the bottom when viewing on a mobile device (col-xs). I have attempted to solve this issue myself without s ...

javascripthtmltwitter-bootstrapcss

Discover the complete compilation of CSS class regulations (derived from various stylesheets) along with their currently active properties for the chosen element

Is there a way to retrieve all the matched CSS Selectors for a selected element and access the properties of each active class applied to that element? I have researched methods like using getMatchedCSSRules and checking out However, I am hesitant to use ...

javascriptjqueryhtmlcss

Connecting an admin dashboard to a MERN e-commerce application: A step-by-step guide

In the process of developing an e-commerce platform, I find myself using React.js for the frontend and Node.js/Express.js for the backend. My current challenge lies in creating a seamless dashboard to manage items within the app. One possible solution wo ...

javascriptreactjsexpressadminmern

Tips for dividing the WordPress header navigation horizontally using separate PHP files

I am trying to customize my WordPress menu navigation by splitting it into two sections: left and right. I have added the menu function in the "functions.php" file to create the menu from the backend, and the frontend modifications will be done in the "hea ...

phpcsswordpressheadernavigation

Utilizing Angular to convert a string array into an array of enum values through an HTTP GET request

I have a list of different user roles defined in my typescript code: enum UserRole { CONSULTANT, MANAGER, ... } There is a REST endpoint /users/id/roles that returns an array of strings representing the roles of a specific user: [ "CONSU ...

javascriptangulartypescriptenumstype-conversion

Having trouble with the dropdown multiselect feature in AngularJS?

I'm striving to develop a straightforward multi-select dropdown utilizing angular JS, bootstrap, and JS. This dropdown should display days (mon, tue...sun), with options for select all and unselect all. My goal is to create a controller that will de- ...

javascripthtmlangularjstwitter-bootstrapweb

Capturing the process exit event in Express: A guide

process.on('exit', async () => { console.log('updating') await campaignHelper.setIsStartedAsFalse() console.log('exit') process.exit(1) }) This code snippet is designed to trigger an update in the database before t ...

javascriptnode.jsexpressmongoose

Utilizing React JS to call a static function within another static function when an HTML button is clicked

Can you please analyze the following code snippet: var ResultComponent = React.createClass({ getInitialState: function () { // … Some initial state setup ……. }, handleClick: function(event) { // … Handling click event logic …… // Including ...

javascriptreactjs

Swap out a module with a different one in a node.js environment

In the scenario where a node.js application consists of numerous files referencing a particular module (like underscore), and there is a need to replace that module with another (such as lodash), the typical approach involves globally replacing the names a ...

javascriptnode.jsmodulerequire

Tips for centering a paragraph vertically within a div element

I'm struggling to achieve automatic vertical alignment for this. While I can manually center it using padding-bottom, I prefer a way to position it vertically on its own. How can I accomplish this while retaining the display: inline-block feature? &l ...

htmlcss

Tips for incorporating a pause or delay into if-else statements

Trying to optimize my semi-automated JavaScript code so it runs at a slower pace. Currently, it fetches detailed data from 100 listings one by one at a speed of around 15 times per second. While this works well in some aspects, it makes tracking which elem ...

javascriptarrays