javascript - 如何在点击时显示隐藏的div

Question

我有一个隐藏的 div，它在点击时成功滑出。但是，该 div 中的内容取决于单击的链接，我试图根据单击的链接显示/隐藏它。

JS Fiddle Here .

非常感谢所有帮助

HTML

    <div id="main-nav">

    <ul class="list-unstyled">
        <li class="sub director-sub"><a href="/directors">Directors</a></li>
        <li><a href="/News">News</a></li>
        <li class="sub contact-sub"><a href="/Contact">Contact</a></li>
        <li>
            <ul class="list-inline social">
                <li class="fb"><a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                <li><a href="#" target=_"blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                <li><a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
            </ul><!-- /.list-inline social -->
        </li>
        <li class="sparks">
            lorem ipsum
        </li>
    </ul><!-- /.list-unstyled -->
</div><!-- /#main-nav -->

<div id="sub-nav">
    <div class="sub-content">

        <!--begin directors-->
        <div class="directors-subnav">
        <h2 style="background:orange;">Directors Sub Nav</h2>
            <ul class="list-unstyled">
                <li>Lorem ipsum.</li>
                <li>Atque, neque.</li>
                <li>Omnis, inventore!</li>
                <li>Fugit, atque.</li>
                <li>Nisi, temporibus.</li>
            </ul><!-- /.list-unstyled -->           
        </div><!-- /.directors-subnav -->
        <!--end directors-->


        <!--begin Contact-->
        <div class="contact-subnav">
        <h2 style="background:green;">Contact Sub Nav</h2>
            <ul class="list-unstyled">
                <li>Lorem ipsum.</li>
                <li>Atque, neque.</li>
                <li>Omnis, inventore!</li>
                <li>Fugit, atque.</li>
                <li>Nisi, temporibus.</li>
            </ul><!-- /.list-unstyled -->           
        </div><!-- /.directors-subnav -->
        <!--end directors-->


    </div><!-- /.sub-content -->
</div><!-- /#subnav -->

JS 在这里:

$(document).ready(function(){

  //get nav container width
  var boxWidth = $('#sub-nav').width();

  // hide subnav
  $('#sub-nav').width(0);
  $('.directors-subnav, .contact-subnav').hide();

  //set nav width to zero
  $('#main-nav li.sub a').click(function(e){

      // remove opened class from other links not clicked
      $("#main-nav li.sub a").not(this).removeClass('opened');

      e.preventDefault();

      if($(this).hasClass('opened')){
        // slide the box closed
        $("#sub-nav").animate({
                width: '0' + 'px'
            });

      } else {
        $("#sub-nav").animate({
                width: boxWidth + 'px'
            });
      }

      // toggle class so we can animate box based on class
      $(this).toggleClass('opened');


      /****** show/hide of page specific content******/
      if($(this).parent().hasClass('.director-sub')){

        // show/hide directors subnav
        $('.directors-subnav').toggle();
        $console.log('directors clicked');

      } else if($(this).parent().hasClass('.contact-sub')) {

        // show/hide contaxct sub nav
         $('.contact-subnav').toggle();
        $console.log('contact clicked');

      }
      /****** end show/hide of page specific content******/


  })

})

Answer 1

第 34 和 40 行的 hasClass 中不需要点。它应该是 hasClass('director-sub') 而不是 hasClass(' .director-sub')