CODEWITHSUNDEEP
javascriptwordpressmobilejquery
jfvandekamp
jfvandekamp

Reputation: 17

Jquery toggle mobile menu (remove href javascript)

I'm trying to make a jQuery toggle menu for a mobile website for one of my clients. I'll have to tell you i'm not experienced in javascript and i justed started looking at it.

The current website is a Wordpress website so the menu structure is generated by WP.

Because this is generated by WP i need to use javascript to manipulate the data for adding the + - and > signs for toggleing and if no childeren to go directly to the page.

I use this javascript for adding the spans with the desired icon. I've managed so far.

http://jsfiddle.net/9Dvrr/9/

But there are still 2 problems i can't seem to figure out.

  1. Remove the href from the "a" when the "li" has a "ul" child. This should remove the links of the items so they will only toggle (not link) to navigate straight throug to the deepest level.
  2. Currently the javascript is adding mutiple spans with the icons. I can't seem to figure out why

I'm stuggeling with this for a while now and was wondering if someone could help me with this.

Upvotes: 0

Views: 762

Answers (2)

Blazemonger
Blazemonger

Reputation: 92893

Your first problem can be solved with the following:

$.each($('#menu-mobiel li'), function(i, value) {
    var $this = $(this);
    if ($this.has('ul').length > 0) {
        $this.children('a').attr('href','javascript:');
    }

Your second problem is a bit harder for me to understand. Do you only want one + for items with submenus, and one > for items with a link?

Upvotes: 0

Leo
Leo

Reputation: 5276

In the jsfiddle you provided, you loop on the elements to add spans with a "+" or "-" sign inside, depending on the case. The thing is, the HTML you're starting with already has those spans in it, wich is why you're seeing some duplicates.

As you said you can't add those spans in the HTML because of your WP strucutre, I guess they come from a bad copy/paste you did while creating the jsfiddle. I removed them in the HTML and added a return false to prevent linking to another page when there is a ul inside the a tag.

http://jsfiddle.net/wzzGG/

Upvotes: 1

Related Questions