Question

垂直菜单式手风琴有问题。

<div class="nav-section-container-large" data-set="nav-section" role="navigation">
<div class="nav-section">
<span class="nav-section-heading delta">In this section:</span>
<ul class="nav-section-level-2">
  <li><a href="" class="">Investment advantage</a></li>
  <li><a href="" class="">Statistics </a></li>
     <ul class="nav-section-level-3">
      <li><a href="" class="">Clean technology</a></li>
      <li><a href="" class="">Food and beverage</a></li>
      <li><a href="" class="">Fund investment</a></li>
      <li><a href="" class="">High-value manufacturing</a></li>
      <li><a href="" class="">Information and communications technology</a></li>
      <li><a href="" class="">Infrastructure</a></li>
      <li><a href="" class="">Life sciences</a></li>
      <li><a href="" class="">Petroleum and minerals</a></li>
      <li><a href="" class="">Resource manufacturing</a></li>
    </ul>
  <li><a href="" class="">Investment regulations</a></li>
  <li><a href="" class="">How can we help</a></li>
  <li class="is-selected"><a href="" class="">Sectors of opportunity</a>
    <ul class="nav-section-level-3">
      <li><a href="" class="">Clean technology</a></li>
      <li><a href="" class="">Food and beverage</a></li>
      <li class="is-selected"><a href="" class="selected">Fund investment</a></li>
      <li><a href="" class="">High-value manufacturing</a></li>
      <li><a href="" class="">Information and communications technology</a></li>
      <li><a href="" class="">Infrastructure</a></li>
      <li><a href="" class="">Life sciences</a></li>
      <li><a href="" class="">Petroleum and minerals</a></li>
      <li><a href="" class="">Resource manufacturing</a></li>
    </ul>
  </li>
    </ul>
   </div>
  </div>

和

<script type="text/javascript">
  $(function(){    
       $(document).on('click', ".nav-section-level-2 li", function(e){
           e.preventDefault();

           $(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');

           if ($(this).hasClass('is-selected') && $('.nav-section-level-3 li').hasClass('is-selected') ) 
      $('.nav-section-level-2 ul').slideToggle('slow', function() { $(this).toggleClass('is-selected'); });
});

     $(document).on('click', ".nav-section-level-3 li", function(e){
         e.preventDefault();

         $(this).addClass('is-selected').siblings('.is-selected').removeClass('is-selected');
      });
   });
 </script>

算法垂直菜单正在运行，但非常糟糕。折叠和扩展无法正常工作！

如何找到解决问题的方法？

请准备好解决（输入JQuery UI）不提供。

非常感谢。

Answer 1

我不确定我是否做对了。但这是一个解决方案：

Modified example

    $(function(){    
       $(".nav-section-level>li").on('click',function(e){
           var ulElement = $(this).find('ul');

           var isSameElement = $(ulElement).hasClass("open");

           if( $("ul.open") !== undefined){
               $("ul.open").slideToggle('slow');
               $("ul.open").removeClass("open");
           }
           if(!isSameElement){
               $(ulElement).slideToggle('slow');
               $(ulElement).addClass("open");
           }
       });  
});

首先你的html有点凌乱清理它。其次，您不需要为您的li添加任何类或任何内容。点击即可轻松滑动。这将显示隐藏您的孩子ul。

垂直菜单式手风琴

1 个答案: