Tengo un div oculto que se desliza con éxito al hacer clic. Sin embargo, el contenido dentro de ese div depende de qué enlace se haga clic y estoy tratando de que se muestre / oculte dependiendo de qué enlace se haga clic.

JS Fiddle Here.

Toda ayuda es muy apreciada

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 aquí:

$(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******/


  })

})
1
CreateSean 10 may. 2016 a las 21:37

3 respuestas

La mejor respuesta

Esto es lo que necesitas.

Un par de cosas necesitaban ser cambiadas.

  1. En ambos argumentos de la función hasClass, el nombre de la clase no puede estar precedido por un ".".

  2. En la instrucción console.log, no puede tener una consola $ anterior.

  3. También hubo un error en el html. en una ubicación (línea 14) debe tener target = " blank" y no target = "blank".

Estos cambios hacen que el código anterior funcione en el violín.

Gracias

Paras

  /****** 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******/
2
pparas 10 may. 2016 a las 18:55

No necesita puntos en hasClass en las líneas 34 y 40. Se supone que es hasClass('director-sub') no hasClass('.director-sub')

3
apieceofbart 10 may. 2016 a las 18:44

Simplemente cámbielo a hasClass ('className') de hasClass ('. className')

0
Deepak Garg 10 may. 2016 a las 19:12