La alternancia de mostrar/ocultar funciona cuando se hace clic más de 1 vez, pero cuando se carga la página, se cierra cuando hice clic por primera vez en el hipervínculo. Se suponía que se abría cuando se hacía clic al principio.
$(".openNav").click(function() { $('.box').show(); $('.box').toggleClass("slideUp") }); .clickbox { width: 100px; height: 100px; background: #343434; margin: 0 auto; color: #fff; } .openNav { color: #fff; } .box { width: 200px; height: 200px; background: orange; margin: 0 auto; margin-top: 3%; overflow: hidden; transition: all 0.2s ease-in-out; } .box.slideUp { height: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div> <div class="box" style="display: none;"><a href="javascript:;" class="openNav">dddd</a</div>Simplemente agregue la clase "slideUp" en su marcado HTML:
<div class="box slideUp"> NB: el style="display: none;" el atributo en ese elemento ya no es necesario, ni tiene que ejecutar $('.box').show() .
Fragmento actualizado:
$(".openNav").click(function() { $('.box').toggleClass("slideUp") }); .clickbox { width: 100px; height: 100px; background: #343434; margin: 0 auto; color: #fff; } .openNav { color: #fff; } .box { width: 200px; height: 200px; background: orange; margin: 0 auto; margin-top: 3%; overflow: hidden; transition: all 0.2s ease-in-out; } .box.slideUp { height: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div> <div class="box slideUp"><a href="javascript:;" class="openNav">dddd</a</div>Prueba este código:
$(".openNav").click(function() { $('.box').slideToggle("fast"); }); .clickbox { width: 100px; height: 100px; background: #343434; margin: 0 auto; color: #fff; } .openNav { color: #fff; } .box { width: 200px; height: 200px; background: orange; margin: 0 auto; margin-top: 3%; overflow: hidden; transition: all 0.2s ease-in-out; } .box.slideUp { height: 0; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div> <div class="box" style="display: none;"><a href="javascript:;" class="openNav">dddd</a</div><div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div> <div class="box"><a href="javascript:;" class="openNav">dddd</a</div> $(".openNav").click(function() { $('.box').show(); $('.box').toggleClass("slideUp") }); .clickbox { width: 100px; height: 100px; background: #343434; margin: 0 auto; color: #fff; } .openNav { color: #fff; } .box { width: 200px; height: 0px; background: orange; margin: 0 auto; margin-top: 3%; overflow: hidden; transition: all 0.2s ease-in-out; } .box.slideUp { height: 200px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="clickbox"><a href="javascript:;" class="openNav">dddd</a></div> <div class="box" style="display: none;"><a href="javascript:;">dddd</a</div>