Раскрывающееся меню jQuery открывает все подменю

Question

Раскрывающееся меню jQuery открывает все подменю

0

У меня проблема с jQuery. Я хочу создать гибкое раскрывающееся меню с подменю. Если ширина окна меньше 700 пикселей, подменю будет вызывать onClick. Если окно шириной более 700 пикселей, подменю будет тригером onHover.

Код window.resize должен внести изменения при изменении размера окна без обновления страницы. Он работает, но проблема в том, что если я нажимаю/навешиваю любую из двух ссылок с вложенным под-списком, он открывает ВСЕ вложенные списки. Кроме того, это работает.

Это код Html (класс.navLevel2 имеет отображение: none):

    <div class="mainNav">
     <ul class="navLevel1">
    <li><a href="">link 1</a></li>
        <li class="fakeLink">link 2
           <ul class="navLevel2">
            <li><a href="">link 2.1</a></li>
        <li><a href="">link 2.2</a></li>
           </ul>
        </li>
        <li class="fakeLink">link 3
           <ul class="navLevel2">
            <li><a href="">link 3.1</a></li>
                <li><a href="">link 3.2</a></li>
           </ul>
        </li>
        <li><a href="">link 4</a></li>
      </ul>
    </div>

И это jQuery:

    <script>
      $(document).ready(function(){
        function checkWidth() {
            var windowsize = $(window).width();
            if (windowsize < 700) {
                $('.navLevel1').addClass('small');
                $('.fakeLink').attr('onclick','return click_m()');
            } else {
                $('.navLevel1').addClass('big');
                $('.fakeLink').attr('onmouseover','return toggle_m()').attr('onmouseout','return toggle_m()');
            }
        }
        checkWidth();  // Execute on load

        $(window).resize(function() {
            if($(window).width() < 700) {
                $('.mainNav > ul').removeClass('big');
                $('.mainNav > ul').addClass('small');
                $('.fakeLink').attr('onclick','return click_m()');
                $('.fakeLink').removeAttr('onmouseover','return toggle_m()').removeAttr('onmouseout','return toggle_m()');
            }
            else if($(window).width() > 700) {
                $('.mainNav > ul').removeClass('small');
                $('.mainNav > ul').addClass('big');
                $('.fakeLink').attr('onmouseover','return toggle_m()').attr('onmouseout','return toggle_m()');
                $('.fakeLink').removeAttr('onclick','return click_m()');    
            }
        }) // window.resize
      }) // document.ready
    </script>

Триггеры, написанные в заголовке:

function click_m(){
  $('.fakeLink > ul').slideToggle(300); 
}

function toggle_m(){
  $('.fakeLink > ul').stop().slideToggle(300);  
}

Итак, проблема в том, что: если я нахожу/нажимаю ссылку 2, он открывает ВСЕ вложенные списки. То же самое, если щелкнуть/навести ссылку на ссылку 3. Где проблема, потому что я не могу найти ошибку.

Спасибо!

cristixxxlog 22 сен. 2013, в 19:26

Источник

Теги:

javascript

jquery

html

css

menu

2 ответа

0

Селектор .fakeLink > ul в вашем триггере -

function click_m(){
   $('.fakeLink > ul').slideToggle(300);   
}

function toggle_m(){
   $('.fakeLink > ul').stop().slideToggle(300);  
}

попытается найти все <ul> под классом .fakeLink, и, следовательно, все они показывают.

Вы можете использовать next() чтобы выбрать только следующий <ul> и я считаю, что это должно сработать. Так -

function click_m(){
   $('.fakeLink').next('ul').slideToggle(300);   
}

function toggle_m(){
   $('.fakeLink').next('ul').stop().slideToggle(300);  
}

Не испытано.

RCNeil 22 сен. 2013, в 15:38

0

Извините, но с next () ничего не делает, независимо от размера окна. Но все равно спасибо!
cristixxxlog 22 сен. 2013, в 17:40

Ещё вопросы

Извините, но с next () ничего не делает, независимо от размера окна. Но все равно спасибо!

rwaymouth · Accepted Answer · 2013-09-22T17-22-00.000Z

Я думаю, вам нужно изменить функцию click_m, чтобы нацелиться на конкретный элемент, который был нажат. Я попробовал это:

function click_m($target){
  $($target).children().slideToggle(300); 
}

и имел вызов скрипта:

$('.fakeLink').attr('onclick','return click_m(this)');

который, похоже, работает. Вы можете увидеть это здесь: Пример Codepen

Затем вы просто дублируете концепцию с версиями зависания.

Большое спасибо! Теперь это работает!