CODEWITHSUNDEEP
javascriptjqueryhtmlcssmenu
Muhammad Hassan
Muhammad Hassan

Reputation: 1304

Show Hidden Sub-Menu OnClick By Avoiding Link Of Parent Menu

I am working on a project where the most bad thing is that I can't edit HTML code of my project. I can only edit CSS/JavaScript. My project is that I have a list of menu using <ul><li>... having sub-list also in it. The full HTML code is giving below...

<ul class="main_list">
 <li class="parent">
  <a href="##########">Menu-1</a>
   <ul class="children">
    <li><a href="##########">SubMenu-1</a></li>
    <li><a href="##########">SubMenu-2</a></li>
    <li><a href="##########">SubMenu-3</a></li>
   </ul>
 </li>
 <li><a href="##########">Menu-2</a></li>
 <li><a href="##########">Menu-3</a></li>
 <li><a href="##########">Menu-4</a></li>
 <li class="parent">
  <a href="##########">Menu-5</a>
   <ul class="children">
    <li><a href="##########">SubMenu-1</a></li>
    <li><a href="##########">SubMenu-2</a></li>
    <li><a href="##########">SubMenu-3</a></li>
   </ul>
  </li>
</ul>

This is the HTML code that I can not edit. I can only edit or add CSS/JavaScript. Here I want to hide all children menus and will show on click of there parent menu. But when we click on there parent menu then it goes to the external link that is on parent menu. So is there any way or solution for this...???

Update: Keep in mind that I also want the parent menu link working too. I have an idea to add some text in front to parent menu like show/hide and make some JavaScript to open its children menu and in this case parent menu link will also work if we will click on it directly. Now can we add some text/icon in front of parent menu using JavaScript as I can't edit HTML?

Upvotes: 1

Views: 4335

Answers (5)

Nuno Sarmento
Nuno Sarmento

Reputation: 427

The below works for me :) 

jQuery(function( $ ){
 $(document).ready(function(){
  $('.main_list a').click(function (e) {
    if ($(this).parent().children('ul').is(':visible') != true) {
        $(this).parent().children('ul').show();
        e.preventDefault();
        return false;
     }
   })
  });
});

Upvotes: 0

JRulle
JRulle

Reputation: 7568

Based off of my comment above...

Append a drop down arrow next to the menu item for items with children - clicks on the parent item would navigate to it's link but clicks on the arrow would open up the submenu

JSfiddle DEMO

CSS:

ul.children {
    display: none;
}

JQUERY:

$(function(){
    $('li.parent').each(function(){
        $(this).children('a').after('<img src="http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png" />');
    });

    $('li.parent img').on("click",function(){
        $(this).siblings('ul.children').toggle();
    });
});




EDITED JQUERY (with arrow image toggle):

$('li.parent img').on("click",function(){
    if($(this).hasClass('open')) {
        $(this).removeClass('open');
        $(this).attr('src','Arrow-down.png');
    } else {
        $(this).addClass('open');
        $(this).attr('src','Arrow-up.png');
    }
    $(this).siblings('ul.children').toggle();
});

Updated DEMO

Upvotes: 1

empiric
empiric

Reputation: 7878

Your click-function:

$('.main_list .parent > a').on('click', function(event){
    event.preventDefault();

    var href = $(this).attr('href'); // save the href for further use
    $(this).siblings('.children').show(); //or whatever show-function you want to use

   window.location.href = href; //if you want to user to be redirected
   //OR
   window.open(href,'_blank'); //for opening a new tab

});

For your second request, you can do somethin like that:

$(document).ready(function{
    $('.main_list .parent').prepend('<span class="show">Show</span>');
});

then your selector in the click-handler above would be:

$('.show')

Demo

Upvotes: 1

rjomir
rjomir

Reputation: 304

Cach your parent click event via JavaScript, then use event.preventDefault() to stop redirecting, then u can make some logic to show/hide menu items.

$(document).ready(function(){
    $.each('.parent', function(){
          $(this).prepend('<div class="clickableBox"></div>');
    })

    $(document).on('click', '.clickableBox', function(event){       
       //show/hide logic here
    })
})

Upvotes: 1

David
David

Reputation: 4883

Since I can't see the full HTML, I'm acting like main_list is the only one.

// Get all anchors in menu
var anchors = document.getElementsByClassName('main_list')[0].getElementsByTagName('a');
// Change HREF to do nothing
for(a in anchors){
    a.href = "javascript:void(0);
}
// Do other stuff

Make that code run at the end of the page after everything has loaded. Changing the href to javascript:void(0) will make there be no action.

Upvotes: 0

Related Questions