Question

我很确定解决方案非常简单，但我已经在这里工作了几个小时而无法解决问题。有时我们只需要额外的一双眼睛。

我已经创建了一个在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');
        }
      }
    });
  });
});

Answer 1

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

Javascript菜单树无法正常显示

1 个答案: