Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Asad Kashmiry
Asad Kashmiry
219 Points

jQuery Dropdown Menu with ID's Bug

Plz, visit the site http://www.projects.iasad.me

Have a look at http://www.projects.iasad.me/services.html

Problems: When I try to visit Our Services drop-down menu from another page(i.e Home, About, contact etc) the drop down doesn't work properly. Example: Suppose I want to visit Corporate Advisory of Our Services Submenu from Home page but it will go to Fixed Income Submenu of Our Services instead. What's the actual problem? Here are the codes

/*********Drop Down****/

$(function(){ $(".dropdown-menu .menu2").click(function(){ $("#corporate-advisory").show(); $("#get-in-touch").css({ 'margin-top':'20%' }); $("#fixed-income-trading").hide(); $("#investment-management").hide();
}); 

  $(".dropdown-menu .menu3").click(function(){
     $("#investment-management").show();
     $("#get-in-touch").css({
        'margin-top':'20%'
     });

     $("#fixed-income-trading").hide();
    $("#corporate-advisory").hide();

    });

$(".dropdown-menu .menu1").click(function(){ $("#fixed-income-trading").show(); $("#corporate-advisory").hide(); $("#investment-management").hide();
});

});

2 Answers

Maarten van Wijk
Maarten van Wijk
16,320 Points

I've dug a little deeper.

if (window.location.hash === '#fixed-income-trading') {
        $('#fixed-income-trading').show();
        $('#corporate-advisory').hide();
        $('#investment-management').hide();
    } else if (window.location.hash === '#corporate-advisory') {
        $('#fixed-income-trading').hide();
        $('#corporate-advisory').show();
        $('#investment-management').hide();
    } else if (window.location.hash === '#investment-management') {
        $('#fixed-income-trading').hide();
        $('#corporate-advisory').hide();
        $('#investment-management').show();
    }

this way the code on 'services.html' looks at the part after the # in the URL when it loads and shows the appropriate part and hides the others.

I tested this on your website via my console and its works.

Asad Kashmiry
Asad Kashmiry
219 Points

Dear Maarten,

Thanks a lot for your helpful solution! Thanks from my heart!

Brother, Can you help me how can I prevent default browser behavior by using event.preventDefault() method of these codes? I added event.preventDefault() but the codes don't work properly.

Kind Regards Asad

Maarten van Wijk
Maarten van Wijk
16,320 Points
Maarten van Wijk
Maarten van Wijk
16,320 Points

It is because you load a new page. If you're on the 'About Us' page and click on the 'Corporate Advisory' page, the script will run correctly in the background on the 'About Us' page, and then it will load the 'services.html' file, but the script will not be run again. That's why everything works fine on the 'services.html' page, it doesn't get reloaded.

The only solutions i can come up with would be either:

  1. Make 3 different pages and link to those, you'd get the same effect, or
  2. Just use the one page and show everything. So don't use the jQuery script. Less is more. You can still link to the individual parts of the webpage with anchors. I would recommend this because this way, the user gets to see all the information at once.
Asad Kashmiry
Asad Kashmiry
219 Points

Hi Maarten, Thanks a lot for your helpful reply.

  1. The client wants to show these on one page by drop-down menu. Please read the second answer.

  2. I am building a web project from PSDs, the client wants to appear only one section from the drop-down menu when a user clicks, so it is not possible to appear all three sections at a time I have to hide 2 sections and show one section.

So there is no way to solve the problem?