Question

如何改变以下功能的工作方式？目前，导航已打开，如果用户点击<a>标记，则会关闭。

我真正想要的是nav最初关闭，并且仅在用户点击<a>标记时才会打开。

(function($){
    $(document).ready(function(){
        $('#main_nav li.active').addClass('open').children('ul').show();
        $('#main_nav li.has_sub>a').on('click', function(){
            $(this).removeAttr('href');
            var element = $(this).parent('li');
            if (element.hasClass('open')) {
                element.removeClass('open');
                element.find('li').removeClass('open');
                element.find('ul').slideUp(200);
            } else {
                element.addClass('open');
                element.children('ul').slideDown(200);
                element.siblings('li').children('ul').slideUp(200);
                element.siblings('li').removeClass('open');
                element.siblings('li').find('li').removeClass('open');
                element.siblings('li').find('ul').slideUp(200);
            }
        });
    });
})(jQuery);


//HTML CODE

<div id='main_nav'>
<ul>
<li class='active'><a href='index.html'>Home</a></li>
<li class='has-sub'><a href='#'>Products</a>
  <ul>
     <li class='has-sub'><a href='#'>Product 1</a>
        <ul>
           <li><a href='#'>Sub Item</a></li>
           <li><a href='#'>Sub Item</a></li>
        </ul>
     </li>
     <li class='has-sub'><a href='#'>Product 2</a>
        <ul>
           <li><a href='#'>Sub Item</a></li>
           <li><a href='#'>Sub Item</a></li>
        </ul>
     </li>
  </ul>
 </li>
 <li><a href='#'>About</a></li>
 <li><a href='#'>Contact</a></li>
 </ul>
  </div>

Answer 1

对我来说，看起来代码已经兼顾了。如果第二次点击按钮，导航重新打开，对吗？

如果是这种情况，那么只需注释掉或删除该函数中的第一行代码，这会在页面首次加载时打开导航菜单。

// $('#main_nav li.active').addClass('open').children('ul').show();

我怎么能扭转这个功能？

1 个答案: