Menu not clickable when on certain page with script running

Hi guys,

I've got some pages that aren't allowing me to click on my main menu. I'm pretty sure it has to do with the JavaScript I have running on that page - as for all other pages in the site the menu works fine.

These pages have the script:
http://demo.xlearn.net.au/tools/explore/search-area/
http://demo.xlearn.net.au/tools/explore/xplan-dashboard/

Menu that you can't click - e.g.:
menu > Mode (or any menu with sub-menus)

The script is doing what it should be doing (it shows / hides items as user clicks in the area), but seems to be interfering with the navigation menu.

The script is embedded within the page that is displayed (e.g. in the 2 ones above).

Any help would be great.

Thanks!
Brett

  • Jude

    Hey @Brett

    Hope you are doing great !!

    I can see this snippet causes the conflict ( basically jQuery done wrong by some theme / plugin running on the site )

    $(document).ready(function(){
    	$(".child-items-1").hide();
        $(".drop-down-1").click(function(){
            $(".child-items-1").toggle();
            $(".child-items-2").hide();
            $(".child-items-3").hide();
            $(".child-items-4").hide();
        });
    });
    $(document).ready(function(){
    	$(".child-items-2").hide();
        $(".drop-down-2").click(function(){
            $(".child-items-2").toggle();
            $(".child-items-1").hide();
            $(".child-items-3").hide();
            $(".child-items-4").hide();
        });
    });
    $(document).ready(function(){
    	$(".child-items-3").hide();
        $(".drop-down-3").click(function(){
            $(".child-items-3").toggle();
            $(".child-items-1").hide();
            $(".child-items-2").hide();
            $(".child-items-4").hide();
        });
    });
    $(document).ready(function(){
    	$(".child-items-4").hide();
        $(".drop-down-4").click(function(){
            $(".child-items-4").toggle();
            $(".child-items-1").hide();
            $(".child-items-2").hide();
            $(".child-items-3").hide();
        });
    });

    A quick fix it to replace this line

    $(".drop-down-1").click(function(){

    With

    jQuery(".drop-down-1").click(function($){

    That sets the scope for the $ operator correctly. Im not sure where to make this in your themes/plugins but a simple text search will show you.

    Cheers
    Jude

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.