Javascript, если еще проблемы с мобильным меню переключения Jquery

Question

Я пытаюсь создать меню переключения jquery для мобильного сайта.

Мне удалось создать меню переключения с + и -, когда переключено, а когда нет

Текущая версия : http://jsfiddle.net/9Dvrr/7/

Теперь я пытаюсь создать оператор if else для отображения ">", когда нет дочерних элементов.

Эксперимент : http://jsfiddle.net/9Dvrr/6/

Проблема в том, что я просто могу это понять ..

Заранее спасибо,

Rick

Answer 1

Этот код ниже будет делать то, что вы хотите, но он может определенно использовать небольшой рефакторинг. Это в основном, чтобы показать вам, как вы можете достичь этого просто:

$('#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('+ ');
    }
}

Answer 2

Вам необходимо проверить свойство length при проверке, есть ли у него дочерние элементы. В противном случае все, что вы проверяете, это если результат не равен нулю или нет ... и он всегда будет отличен от нуля, даже если селектор не совпадает, потому что он вернет jQuery. Он будет пустым от любых элементов, но, тем не менее, является объектом и, следовательно, не равен нулю.

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