javascript - How to get span to reset when class not active? -
ok warn you, know hardly javascript , jquery need these 2 buttons @ moment. (for example have jquery in different scripts because wasn't sure if put them in same 1 [i have jquery/javascript in html])
anyway problem can't span element go how before clicking on parent element when other class active. ends making arrows wrong way if don't close 1 of dropdown forms before opening other.
ps - dont need @ whole code snippet (just jquery , html) unless there have done wrong.
pps - if looked @ snippet, know code mess.
$('#login-trigger').click(function() { $(this).next('#login-content').slidetoggle(); $(this).toggleclass('active'); $('#signup-trigger.active').removeclass('active'); if ($(this).hasclass('active')) $(this).find('span').html('▲') else $(this).find('span').html('▼'); $(this).parent().siblings().children().next().slideup(); return false; }); $('#signup-trigger').click(function() { $(this).next('#signup-content').slidetoggle(); $(this).toggleclass('active'); $('#login-trigger.active').removeclass('active'); if ($(this).hasclass('active')) $(this).find('span').html('▲') else $(this).find('span').html('▼'); $(this).parent().siblings().children().next().slideup(); return false; });nav { margin-top: 10px; margin-right: 30px; } nav ul { top: 0; right: 0; margin: 10px 1% 10px 5px; padding: 0; list-style: none; position: absolute; float: right; background: #939393; border-bottom: 1px solid #fff; border-radius: 3px; display: inline-block; } nav li { float: left; } nav #login { border-right: 1px solid #ddd; box-shadow: 1px 0 0 #fff; } nav #login-trigger { display: inline-block; *display: inline; *zoom: 1; height: 25px; line-height: 25px; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 14px; padding: 0 8px; text-decoration: none; color: #3e8ec4; } nav #login-trigger { border-radius: 3px 0 0 3px; } nav #login-trigger:hover, nav #login .active { background: #ffffff; } nav #login-content { display: none; position: absolute; top: 24px; right: 0; z-index: 999; background: #ffffff; background-image: linear-gradient(top, #fff, #eee); padding: 6px; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9); border-radius: 3px 0 3px 3px; } nav li #login-content { right: 0; width: 264px; } /*--------------------*/ #inputs input { background: #f1f1f1; padding: 6px 5px; margin: 0 0 5px 0px; width: 234px; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 1px #ccc inset; } #inputs input:focus { background-color: #fff; border-color: #e8c291; outline: none; box-shadow: 0 0 0 1px #e8c291 inset; } #inputs label { width: 150px; display: inline-block; } #inputs label input { display: inline-block; width: 13px; margin: auto 1px; vertical-align: middle; } /*--------------------*/ #login #actions { margin: 10px 0 0 0; padding-left: 6px; padding-right: 6px; } #login #submit2 { background-color: #d14545; background-image: linear-gradient(top, #e97171, #d14545); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; border: 1px solid #7e1515; float: left; height: 30px; padding: 0; width: 100px; cursor: pointer; font: bold 14px arial, helvetica; color: #fff; } #login #submit2:hover, #login #submit2:focus { background-color: #e97171; background-image: linear-gradient(top, #d14545, #e97171); } #login #submit2:active { outline: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; } #login #submit2::-moz-focus-inner { border: none; } #login label { float: right; line-height: 30px; } #login label input { position: relative; top: 2px; right: 2px; } /*--------------------*/ nav #signup { border-right: 1px solid #ddd; box-shadow: 1px 0 0 #fff; } nav #signup { border-radius: 0 3px 3px 0; } nav #signup-trigger { display: inline-block; *display: inline; *zoom: 1; height: 25px; line-height: 25px; font-family: arial, helvetica, sans-serif; font-weight: bold; font-size: 14px; padding: 0 8px; text-decoration: none; color: #3e8ec4; } nav #signup-trigger { border-radius: 3px 0 0 3px; } nav #signup-trigger:hover, nav #signup .active { background: #ffffff; } nav #signup-content { display: none; position: absolute; top: 24px; right: 0; z-index: 999; background: #ffffff; background-image: linear-gradient(top, #fff, #eee); padding: 6px; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, .9); border-radius: 3px 0 3px 3px; } nav li #signup-content { right: 0; width: 264px; } #signup #actions { margin: 10px 0 0 0; padding-left: 6px; padding-right: 6px; } #signup #submit2 { background-color: #d14545; background-image: linear-gradient(top, #e97171, #d14545); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; border: 1px solid #7e1515; float: left; height: 30px; padding: 0; width: 150px; cursor: pointer; font: bold 14px arial, helvetica; color: #fff; margin-left: 50px; } #signup #submit2:hover, #signup #submit2:focus { background-color: #e97171; background-image: linear-gradient(top, #d14545, #e97171); } #signup #submit2:active { outline: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; } #signup #submit2::-moz-focus-inner { border: none; } #signup label { float: right; line-height: 30px; } #signup label input { position: relative; top: 2px; right: 2px; } nav { text-decoration: none; color: #fff; background: rgba(0, 0, 0, 0.5); border-radius: 0 5px 5px 0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav> <ul> <li id="login"> <a id="login-trigger" href="#"> log in <span>▼</span> </a> <div id="login-content"> <form> <fieldset id="inputs" style="padding-right: 6px; padding-left: 6px; padding-top: 10px;"> <input id="username" type="email" name="email" placeholder="your email address" required> <input id="password" type="password" name="password" placeholder="password" required> </fieldset> <fieldset id="actions"> <input type="submit" id="submit2" value="log in"> <label> <input type="checkbox" checked="checked">keep me signed in</label> </fieldset> </form> </div> </li> <li id="signup"> <a id="signup-trigger" href="#"> sign <span>▼</span> </a> <div id="signup-content"> <form> <fieldset id="inputs" style="padding-right: 6px; padding-left: 6px; padding-top: 10px;"> <input id="username" type="email" name="email" placeholder="your email address" required> <input id="password" type="password" name="password" placeholder="password" required> </fieldset> <fieldset id="actions"> <input type="submit" id="submit2" value="signup"> </fieldset> </form> </div> </li> </ul> </nav>
like this, classic flip - flop, add one, remove other.
$('#login-trigger').click(function(event) { event.preventdefault(); var other = $('#signup-trigger'); //adding makes more readable , caches jquery object teeny tiny speed improvement //slide content down $(this).next('#login-content').slidedown(); //slide content $('#signup-content').slideup(); //add $(this).addclass('active'); //remove other.removeclass('active'); if ($(this).hasclass('active')){ $(this).find('span').html('▲'); other.find('span').html('▼');//< swap other link's arrow! }else{ $(this).find('span').html('▼'); other.find('span').html('▲'); } return false; }); $('#signup-trigger').click(function(event) { event.preventdefault(); var other = $('#login-trigger'); //slide content down $(this).next('#signup-content').slidedown(); //slide content $('#login-content').slideup(); //add $(this).addclass('active'); //remove other.removeclass('active'); if ($(this).hasclass('active')){ $(this).find('span').html('▲'); other.find('span').html('▼'); }else{ $(this).find('span').html('▼'); other.find('span').html('▲'); } return false; }); i'm assuming
$(this).parent().siblings().children().next().slideup(); was correlated ( opposite of )
$(this).next('#login-content').slidetoggle(); if follow. ( content of other 1 )
anyway, if wasn't suggest adding id on , making life simpler because $(this).parent().siblings().children().next().slideup(); ugly.
toggling great it's easy lose control of state of toggle, when mixing manual moves automatic, if have manually move take full control of it.
i added event.preventdefault() though returns false, these links , it's best practice sort of thing prevent link reloading page.
the problem arrows not changing them in other one.
try https://jsfiddle.net/k8y68606/1/
but notice how rearranged things make more readable.
Comments
Post a Comment