CODEWITHSUNDEEP
javascriptjqueryhtml
Kevin
Kevin

Reputation: 2688

External link is not opening

Can someone help me out with this one. I have a page, in which is a menu, which I am performing some js stuff on links containing the class 'opener'.

Every link works great, except non-'opener' links (aka... external links), these seem to do nothing.

Can you tell me what I'm doing wrong here: http://new.o7thwebdesign.com

if you click on 'Test 1', the page goes to an internal page as it should. (note, 'External' only exists on the home page, so you'll need to click 'Home')

if you click on 'External' it does not do anything.

Upvotes: 0

Views: 117

Answers (1)

Paul
Paul

Reputation: 141937

In the script h.basic.js you have the following code:

$('#menu li').click(
    function () {
        $(this).siblings().find('ul').slideUp('normal');
        $(this).siblings().find(".menu_arrow").attr('src', '/Images/sidebar_icons/right_arrow.png'); // Slide up all menus except the one clicked
        $(this).has('ul').find('ul').stop(true,true).slideToggle('normal'); // Slide down the clicked sub menu
        $(this).attr('class', 'current');
        var down = $(this).find(".menu_arrow").attr('src') == "/Images/sidebar_icons/right_arrow.png"
        $(this).find(".menu_arrow").attr('src', 
          $(".menu_arrow").attr('src').replace(down ? 'right_' : 'down_', down ? 'down_' : 'right_'));
        return false;
    }
);

The return false; prevents the default action of the event which was a click on a link. Try the following instead:

$('#menu li').click(
    function (e) {
        $(this).siblings().find('ul').slideUp('normal');
        $(this).siblings().find(".menu_arrow").attr('src', '/Images/sidebar_icons/right_arrow.png'); // Slide up all menus except the one clicked
        $(this).has('ul').find('ul').stop(true,true).slideToggle('normal'); // Slide down the clicked sub menu
        $(this).attr('class', 'current');
        var down = $(this).find(".menu_arrow").attr('src') == "/Images/sidebar_icons/right_arrow.png"
        $(this).find(".menu_arrow").attr('src', 
          $(".menu_arrow").attr('src').replace(down ? 'right_' : 'down_', down ? 'down_' : 'right_'));

        return e.target.target == '_blank';
    }
);

The changed line being:

return e.target.target == '_blank';

That is a bit confusing but it looks at the target element of the event (The anchor being clicked) and then looks at it's target property which is set using the target attribute of your <a> tag. If it is _blank then it returns true, otherwise it returns false. So links with target="_blank" will retain the default behaviour, while links without that will supress it.

Upvotes: 2

Related Questions