CODEWITHSUNDEEP
javascriptjqueryhref
Julian Gommers
Julian Gommers

Reputation: 31

prevent href link jQuery

I am making a menu and in this menu I want the option to "slideToggle" some tabs (menu items). So I have a tab "secondary school" and when a user clicks on there, he/she will 'display' some other tabs.

Only problem is that the menu is automatically generated and "secondary school" has a href link which I can not delete since the user needs to be able to get to that link as well.

After some research I came up with this:

$('#menu li a, #menu li').click(function() {
        $(this).find("ul").slideToggle("slow");
        switch( $('#menu ul.menu li ul').css('display') ){
            case "none":
                return false;
            break;
            case "list-item":
                return true;
            break;
        };

});

But when the user now clicks on the link to open the other tabs, the script does not 'slideToggle' the tabs. I have also tried the event.preventDefault(); method which also didn't work since the link needs to be active afterwards. And I have not found an counter function for preventDefault..

When a person clicks on "Information" it needs to show some more tabs.So when the user has clicked on the tab it will open more tabs:So when the user has clicked on the tab it will open more tabs.

So when someone clicks on "information" it will slide down some other tabs and when the other tabs are down, the link to "information" needs to be clickable again to go to the page of "information".

So what I'm searching for is a way to be able to click on a link without going to the link but 'slideToggeling' the tabs and when the tabs are 'displayed' the link needs to be active again.

EDIT: I forgot to specify that this page is a mobile page so mouseovers and hovers will not work...

SOLVED This code has solved my problem:

$('#menu ul.menu li.expanded').each(function(i){
switch(i)
{
case 0:
    $(this).addClass("open");  
break;
case 1:
    $(this).addClass("open");  
break;
case 2:
    $(this).addClass("open");  
break;
case 3:
    $(this).addClass("open");  
break;
case 4:
    $(this).addClass("open");  
break;
}

$('#menu li').click(function() {
    if( $(this).find("ul").css('display') == "none" ){
        $('#menu li ul.menu').slideUp("fast");
    }
    $(this).find("ul").slideDown("slow");
});
$('#menu li.open a').on('click', function(e) {
    var tabs = $(this).parent().find('ul');
    if( tabs.css('display') == "none") {
        e.preventDefault();
        $('#menu li ul.menu').slideUp("fast");
        tabs.slideDown("slow");
    }
});

Thanks for the help!

Upvotes: 0

Views: 2068

Answers (3)

Perttu
Perttu

Reputation: 171

From user experience point of view this sounds bit troublesome. How is user supposed to know that clicking "information" once opens some subelements, but another click goes to "information" page? This seems like a basic accordion element in which one click opens subelements and another click closes them.

If you need to have first level elements as clickable links, but there are also second level elements I would vote for opening the second level elements on mouseover rather than on click. This would also solve your click issues as you wouldn't have to prevent any defaults.

I don't know your HTML so this might go wrong, but let's give it a shot.

$('#menu li').on('mouseenter mouseleave', function() {
    $(this).find('ul').slideToggle('slow');
});

If you still prefer the click approach you could do something like this. Again the CSS selectors can go way wrong as I'm just guessing your HTML, but you might get the idea.

$('#menu li a').on('click', function(e) {
    // Get parent of a (li), find ul underneath and check if it's visible
    var jqUl = $(this).parent().find('ul');
    if(!jqUl.is(':visible')) {
        // subelements are not visible, prevent default and slide subelements down
        e.preventDefault();
        jqUl.slideDown();
    }
});

Upvotes: 0

Christian
Christian

Reputation: 28125

If I understand what you're saying, you can't do this through just events.

Here's an example of how it could work:

jQuery('a').click(function(event){
    event.preventDefault();
    var newurl = this.href;
    jQuery('whatever').slideDown(function(){
        location.href = newurl;
    });
});

Upvotes: 1

lindosekai
lindosekai

Reputation: 184

to cancel href you could make if you later need the href attribute you could asign some event , click,hover ..., and for redirect you have window.location = "otherstuff.html"

Upvotes: 1

Related Questions