Блог

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

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

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

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

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

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

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

Рик

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

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

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

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