Printable View
Salve buongiorno a tutti.
Ho un problema con un semplice "add/remove Class" applicato ad un form.
http://codepen.io/anon/pen/OPdvvG
In pratica al click nel form aggiunge la classe "focus" ma cliccando sul tasto annulla non rimuove la classe "focus" appena applicata.
Qualcuno puņ aiutarmi. Grazie
Js non capisce bene quale feedback mandarti.
Tu gli dici questo:
- "Ogni volta che #comment-form viene cliccato allora metti la classe focus"
- "Ogni volta che #sf_comment-form-cancel viene cliccato allora togli la classe focus"
Il fatto č che #sf_comment-form-cancel sta dentro #comment-form quindi ogni volta che clicchi sf_comment-form-cancel in contemporanea clicchi anche comment-form e toglie/rimette la classe in una frazione di secondo.
Se vuoi mantenere questa struttura (cosa che sconsiglio con tutti quegli id) puoi fare una cosa del genere.
Codice HTML:<html dir="ltr" lang="it-IT">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<style>
#comments_container form textarea{position:relative;display:block;z-index:3;width:97%;height:36px;padding:0 16px;border:1px solid #cecece;}
#comments_container form input[type="button"],#comments_container form input[type="submit"]{position:relative;top:-50px;float:right;z-index:1;}
#comments_container form.focus textarea{height: 100px;}
#comments_container form.focus input[type="button"],#comments_container form.focus input[type="submit"]{top:0px}
</style>
<script>
$(document).ready(function() {
$("#comment-form, #id_top-comment, #button").click(function () {
$("#comment-form").addClass('focus');
}).children().click(function(e) {
return false;
});
$("#sf_comment-form-cancel").click(function () {
$('#comment-form').removeClass('focus');
});
});
</script>
<body>
<div id="comments_container">
<form id="comment-form" class="" method="post" action="">
<!-- textarea -->
<p>
<textarea id="id_top-comment" rows="10" cols="40" name="top-body" placeholder="Lascia un messaggio..."></textarea>
</p>
<!-- buttons -->
<div id="message_buttons">
<input type="submit" id="sf_comment-form-submit" name="post" value="Invia">
<input type="button" id="sf_comment-form-cancel" value="Annulla">
</div>
</form>
</div>
</body>
</html>