Question

我有一个隐藏的div，可以在点击时成功滑出。然而，div中的内容取决于点击了哪个链接，我试图让它显示/隐藏，具体取决于点击的链接。

非常感谢所有帮助

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

这就是你需要的。

需要改变一些事情。

在两个hasClass函数参数中，类名称前面不能有“。”。
在console.log语句中，你不能拥有$前面的控制台。
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'）

如何在点击中显示隐藏的div

3 个答案: