Дерево меню Javascript не отображается должным образом

Question

Дерево меню Javascript не отображается должным образом

0

Я почти уверен, что решение очень просто, но я занимаюсь этим часами, не имея возможности его обработать. Иногда нам нужна дополнительная пара глаз.

Я создал функцию для отображения меню в Javascript. Он работает, нажимая на элемент меню, если у этого элемента есть дети, ссылка не работает, но отображает детей. Это должно происходить полностью вниз по дереву. Нет проблем с этой частью, проблема в том, что когда на элементах видны дети, нажатие на другой элемент в главном меню должно привести к тому, что дети другого элемента исчезнут. Здесь я испытываю проблемы.

Html:

<div class="nav nav-default">
  <ul class="site-menu wm-site-menu">
    <li id="page_9526"><a href="/wm/f/foretaget" target="_parent"     title="Företaget">Företaget</a></li>
    <li id="page_9529"><a href="/wm/f/produkter" target="_parent" title="Produkter">Produkter</a>
      <ul class="" style="display: none;">
        <li id="page_9547"><a href="/wm/f/traktorer" target="_parent" title="Traktorer">Traktorer</a></li>
        <li id="page_9548"><a href="/wm/f/lastmaskiner" target="_parent" title="Lastmaskiner">Lastmaskiner</a>
          <ul class="visible" style="display: block;">
            <li id="page_9727"><a href="/wm/f/kompaktlastare" target="_parent" title="Kompaktlastare">Kompaktlastare</a></li>
            <li id="page_9723"><a href="/wm/f/hjullastare" target="_parent" title="Hjullastare">Hjullastare</a></li>
            <li id="page_9724"><a href="/wm/f/teleskophjullastare" target="_parent" title="Teleskophjullastare">Teleskophjullastare</a></li>
            <li id="page_9725"><a href="/wm/f/teleskoplastare" target="_parent" title="Teleskoplastare">Teleskoplastare</a></li>
           </ul>
       </li>
     </ul>
  </li>
  <li id="page_9533"><a href="/wm/f/begagnat" target="_parent" title="Begagnat">Begagnat</a>
    <ul class="" style="display: none;">
      <li id="page_9534"><a href="/wm/f/maskiner" target="_parent" title="Maskiner">Maskiner</a></li>
      <li id="page_9535"><a href="/wm/f/begagnade-traktorer" target="_parent" title="Traktorer">Traktorer</a></li>
     </ul>
   </li>
   <li class="wm-menu-active" id="page_9515"><a href="/wm/f/verkstad" target="_parent" title="Verkstad">Verkstad</a></li>
   <li id="page_9532"><a href="/wm/f/butik-och-reservdelar" target="_parent" title="Butik &amp; Reservdelar">Butik &amp; Reservdelar</a></li>
   <li id="page_9525"><a href="/wm/f/kontakt" target="_parent" title="Kontakt">Kontakt</a>        
   </li>
 </ul>
</div>

Javascript:

$(document).ready(function(){
  $('.nav-default li').each(function(){

    $(this).click(function(e){
      if($(this).find('ul').length > 0){
        e.preventDefault();   
        $('.site-menu li ul li').on('click', function(e){
          e.stopPropagation();
        });

        if($(this).children('ul').hasClass('visible')){        
          $(this).children('ul').removeClass('visible');
          $(this).children('ul').hide();
        }
        else{
          var child_with_children = $(this).children('ul');
          child_with_children.show();
          child_with_children.addClass('visible');
        }
      }
    });
  });
});

Jason Carty 22 янв. 2014, в 08:19

Источник

Теги:

javascript

jquery

menu

tree

1 ответ

Ещё вопросы

Omar · Accepted Answer · 2014-01-22T06-59-00.000Z

http://jsfiddle.net/98CxJ/

$(document).ready(function(){
  $('.nav-default li').each(function(){

    $(this).click(function(e){
          $(this).siblings().children('ul').fadeOut().removeClass('visible');
      if($(this).find('ul').length > 0){
        e.preventDefault();   
        $('.site-menu li ul li').on('click', function(e){
          e.stopPropagation();
        });

        if($(this).children('ul').hasClass('visible')){        
          $(this).children('ul').removeClass('visible');
          $(this).children('ul').fadeOut();
        }
        else{
          var child_with_children = $(this).children('ul');
          child_with_children.fadeIn();
          child_with_children.addClass('visible');
        }
      }
    });
  });
});

Это работает намного лучше сейчас. Осталась одна проблема. Если я открою lastmaskiner и затем нажму на begagnat, а затем нажму на produkter, будут видны дети lastmaskiner.
Но похоже, что вы намеренно установили это как «видимое» в своем исходном коде, и, следовательно, я следовал
Вы имеете в виду, что если я поменяю местами содержимое if и else 'if ($ (this) .children (' ul '). HasClass (' visible '))', которое должно решить проблему?
Хорошо, исправлена проблема с дополнительной строкой $ (this) .siblings (). Children ('ul'). Children (). Find ('. Visible'). RemoveClass ('visible'). Hide ();