如何在點擊時顯示隱藏的div

Question

我有一個隱藏的div，可在單擊時成功滑出。 但是，該div內的內容取決於單擊哪個鏈接，而我試圖根據單擊哪個鏈接來顯示/隱藏它。

JS提琴這里 。

非常感謝所有幫助

的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')

Answer 2

這就是你所需要的。

幾件事需要改變。

1. 在兩個hasClass函數參數中，類名都不能以“。”開頭。

2. 在console.log語句中，不能有$前面的控制台。

3. html中也有錯誤。 在一個位置（第14行），您需要使用target =“ blank”而不是target = “ blank”。

這些更改使上面的代碼變得有些混亂。

謝謝

帕拉斯

  /****** 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 3

只需將其從hasClass（'。className'）更改為hasClass（'className'）