Если элемент списка имеет дочерний список, добавьте стиль CSS

Question

Если элемент списка имеет дочерний список, добавьте стиль CSS

0

Я имею навигацию от ul, см. Ниже:

<nav>
<ul>
    <li><a href="#">Top Link 1</a></li>
    <li><a href="#">Top Link 2</a></li>
         <ul>
           <li><a href="#" >Sub Link 1</a></li>
           <li><a href="#">Sub Link 2</a></li>
           <li><a href="#">Sub Link 3</a></li>
        </ul>
    </li>        
    <li><a href="#">Top Link 3</a></li>
        <ul>
           <li><a href="#" >Sub Link 1</a></li>
           <li><a href="#">Sub Link 2</a></li>
           <li><a href="#">Sub Link 3</a></li>
        </ul>
    </li>
</ul>
</nav>

У меня есть мой css, который скрывает ссылку "ul", если не зависает родительский "li". (Не покажут, если не спросят, поскольку это не проблемы)

Я пытаюсь использовать JQuery, чтобы добавить стиль css (margin-bottom: 30px;) на верхний уровень "li", только если у него есть дочерний "ul", вложенный в него. Мой JQuery выглядит следующим образом:

<script>
$(document).ajaxSuccess(function () {

    if ($("nav ul >li").children("ul li")) {
        $("nav ul >li").hover(function () {
            $("nav ul >li").css("margin-bottom", "30");
        });

    }
});
</script>

Кажется, это не работает для меня, может кто-нибудь указать, что я делаю неправильно? Или они могут обеспечить лучшее решение этого подхода?

Mark 23 сен. 2013, в 18:55

Источник

Теги:

javascript

jquery

html

css

4 ответа

Ещё вопросы

Patsy Issa · Answer 1 · 2013-09-23T15-00-00.000Z

Попробуйте немного что-то вроде этого:

$('li > ul').each(function(){
  $(this).parent().addClass("your class");
});

Это выберет все uls, которые являются дочерними элементами li, и примените класс к уважаемому li.

Что ж, теперь где код, а где объяснение, и нет объяснения, почему он не работает для OP. ЛОЛ. Приятно видеть, что люди читают лекции, когда сами не делают это правильно ..: D
@PSL присмотритесь. Это выберет всех uls, которые являются детьми li, и применяет класс к уважительному li.

OneOfOne · Answer 2 · 2013-09-23T14-23-00.000Z

.children всегда возвращают массив, проверьте .length

$(document).ajaxSuccess(function () {
    if ($("nav ul >li").children("ul li").length > 0) {
        $("nav ul >li").hover(function () {
            $("nav ul >li").css("margin-bottom", "30");
        });

    }
});

bipen · Answer 3 · 2013-09-23T13-20-00.000Z

у вас есть дополнительный </li> в вашем вопросе, который, я думаю, является опечаткой.

<li><a href="#">Top Link 2</a></li>
                     //-------^^^^^here
     <ul>
       <li><a href="#" >Sub Link 1</a></li>

в любом случае вы проверяете чек на длину детей, если они есть..

попробуй это

$(document).ajaxSuccess(function () {
if ($("nav ul >li").children().length > 0) {
    $("nav ul >li").hover(function () {
        $(this).css("margin-bottom", "30");
    });

}
});

undefined · Answer 4 · 2013-09-23T13-13-00.000Z

.children() возвращает объект, а объект является правдивым значением в JavaScript, кроме того, если условие оценивается как true, вы добавляете слушателя ко всем элементам li не только к тем, у которых есть ul дети, вы можете использовать .has() который является методом фильтрации:

$("nav > ul > li").has('ul').on({
    mouseenter: function() {
      $(this).css("margin-bottom", "30px");
    },
    mouseleave: function() {
      $(this).css("margin-bottom", "n");
    }
});

Или:

li.hovered {
  margin-bottom: 30px;
}

$("nav > ul > li").has('ul').on('mouseenter mouseleave', function(e){
    $(this).toggleClass('hovered', e.type === 'mouseenter');
});