Not able to open sub menus in html

Question

I am working on a HTML website. In Website menus are working properly on desktop screen. But In mobile version Parent menus are opening properly as a dropdown. but when I trying to open sub menus it is not opening. If I click on icon , it is redirecting to a page which is linked to parent menu.

I just want to open sub menu dropdown when I click on a icon. But Parent menu link should be there.

I am very new to javascript. Please help me to solve my problem.

Here is my html code

<nav class="navigation">
    <ul>
        <li> <a href="index.html">HOME </a>
                        </li>
        <li> <span><a href="who-we-are.html">WHO WE ARE </a></span>
            <i class="ion-ios-plus-empty visible-xs"></i>
            <ul class="sub-nav">
                <li>
                    <a href="vision.html">Vision</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

and hrere is my js

$('.sub-menu >a').on('click', function() {
    if ($(window).width() <= 767) {
        $('.sub-menu').removeClass('on');
        $('.sub-menu> ul').slideUp('normal');
        if ($(this).next().next('ul').is(':hidden') == true) {
            $(this).parent('li').addClass('on');
            $(this).next().next('ul').slideDown('normal');
        }
    }
});

please help

there is no elements match `.sub-menu` – wdetac May 25 '18 at 08:24 — wdetac, May 25 '18 at 08:24

score 1 · Answer 1 · answered May 25 '18 at 08:53

Your code is very messy, so first I'll answer the question generally: If you want an event to occur when clicking a link without the link actually opening, you must stop the event from firing. There are 3 ways to do that (I included a link in the bottom of my answer regarding which does what), here I chose e.preventDefault():

document.getElementById("myspeciallink").addEventListener("click", function(e) {
  alert("A different action!");
  e.preventDefault(); //return false / stopPropagation could've also worked here
});

<a href="http://ohno.com" id="myspeciallink">I'm a link!</a>

Regarding your code:

You're trying to bind an event to sub-menu, which doesn't exist in your code.
The sub-menu > a selector only applies to direct children, so for your selector and the following example code only example B would apply to the selector. Perhaps sub-menu a would be better suited here:

$(".sub-menu > a").click(() => alert("Clicked"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub-menu">
    <li>
        <a href="#">Example A</a>
    </li>
</ul>
<br/>
<ul class="sub-menu">
    <a href="#">Example B (Which is what you did but not what you want)</a>
</ul>

Animations based on screen size (a.k.a Responsive Web Design) shouldn't be done like this unless you don't have a choice, and you do. It is preferred you use CSS to achieve what you're trying to accomplish with transistions. I recommend reading more on this subject.

I highly recommend learning CSS, JS and HTML better in order to have a better understanding of what's going on and of good & bad practices.

See also:

What's the difference between event.stopPropagation and event.preventDefault?

score 0 · Answer 2 · answered May 25 '18 at 08:38

Couple of things here.

First of all you apply jQuery code for element $('.sub-menu >a') which means that it will applay to all a elements which are direct children of .sub-menu element.

But you don't have element wih class .sub-menu. You should add it to direct parent of an a element to which it should be applied.

Secondly, if you don't want the a tag to redirect you, then you shiuld add event.preventDeault() where event is an event variable which you can get in .on() function like this $('.sub-menu >a').on('click', function(event) {...

Lastly, this code

$('.sub-menu').removeClass('on');
$('.sub-menu> ul').slideUp('normal');
if ($(this).next().next('ul').is(':hidden') == true) {
    $(this).parent('li').addClass('on');
    $(this).next().next('ul').slideDown('normal');
}

works that way that firstly it hides all dropdowns and then opens teh one you clicked. If it is desired behavior, then ignore this. But I don't think it is.

Why? Because right now when you click on visible dropdown a tag (the one that opens it) you would expect the dropdown to hide. And in your case it will hide and show again. But if you want it to work that way, then no problem. The code is correct.

i have used 2x Business template. url:http://theembazaar.com/theme2x/2xbusiness/. In this template parent tag don't have any link. — Nagu, May 25 '18 at 08:55

Not able to open sub menus in html

2 Answers2