Javascript如果其他问题移动Jquery切换菜单

Question

I'm trying to make a jquery toggle menu for a mobile website.

I've managed to create a toggle menu with + and - when toggled and when not

Current version : http://jsfiddle.net/9Dvrr/7/

Now i'm trying to create a if else statement fot displaying a ">" when there are no children.

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

Problem is that i just can seem to figure it out..

Thanks in advance,

Rick

Answer 1

You need to check the length property when checking if it has children. Otherwise, all you're checking is if the result is non-null or not...and it will always be non-null even if the selector doesn't match because it will return jQuery. It will be empty of any elements, but an object nonetheless and thus non-null.

if (element.has('ul').children('a').length > 0) {
    element.prepend("<span>+ </span>");

Answer 2

This code below will do what you want, but it could definitely use a little refactor. It's mostly to show you how you can achieve it simply :

$('#menu-mobiel ul').hide();

$.each($('#menu-mobiel li'), function(i, value) {
    var $this = $(this);

    if($this.find('ul a').length > 0) {
        $this.find('a').append("<span>+ </span>")
        .addClass('plus')
        .click(function() {
            togglePlus($(this));
            $(this).next('.sub-menu').slideToggle('normal');
        });
    }
    else
    {
        $this.find('a').append("<span>> </span>");
    }
})

function togglePlus(element) {
    element = $(element);
    if (element.hasClass('plus')) {
        element.removeClass('plus').addClass('minus');
        element.children('span').text('- ');
    } else {
        element.removeClass('minus').addClass('plus');
        element.children('span').text('+ ');
    }
}