Forums Développement Multimédia

Aller au contenu

Jquery toggle

Jquery toggle CODE Ajax JQuery EaseJs

1 réponse à ce sujet

#1 ericyuri

    Ceinture Blanche

  • Members
  • Pip
  • 1 messages

Posté 07 March 2013 - 14:10 PM

Bonjour,

J'ai créé une page web pour grouper quelques imputs.

La page marche bien sauf quand je mets le focus dans autre imputs.

Je veux que le code fasse le collapse et restore juste quand je clique sur le texte "+" ou "-".

Pourriez-vous me aider ?

Merci

voici le code :



<html>
<head>
<style>
#toggle-view {
list-style:none;
font-family:arial;
font-size:11px;
margin:0;
padding:0;
width:300px;
}
#toggle-view li {
margin:10px;
border-bottom:1px solid #ccc;
position:relative;
cursor:pointer;
}
#toggle-view h3 {
margin:0;
font-size:14px;
}
#toggle-view span {
position:absolute;
right:5px; top:0;
color:#ccc;
font-size:13px;
}
#toggle-view .panel {
margin:5px 0;
display:n
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$('#toggle-view li').click(function () {
var text = $(this).children('div.panel');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('-');
} else {
text.slideUp('200');
$(this).children('span').html('+');
}
});
});
</script>
</head>
<body>
<ul id="toggle-view">
<li>
<input type="text" id="P29_0" />
<span>+</span>
<div class="panel">
<input type="text" id="P29_1"/></br>
<input type="text" id="P29_2"/></br>
<input type="text" id="P29_3"/></br>
<input type="text" id="P29_4"/>
</div>
</li>
</ul>

</body>
</html>
 


#2 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 09 March 2013 - 17:07 PM

Salut ericyui et bienvenue sur le forum,

Si on reprend ton code : tu écoutes l'évènement "click" sur les éléments "li", il est normal que lorsque tu cliques dans un input placé dans cette liste, l'évènement soit intercepté.

Tu as plusieurs manières de faire, exemples :

Tu donnes une classe au span qui contient le bouton + et pose ton écouteurs dessus


  <ul id="toggle-view">
   <li>
        <input type="text" id="P29_0" />
        <span class="bt">+</span>
        <div class="panel">
         <input type="text" id="P29_1"/><br>
         <input type="text" id="P29_2"/><br>
         <input type="text" id="P29_3"/><br>
         <input type="text" id="P29_4"/>
        </div>
   </li>
  </ul>
 


$('#toggle-view li').on('click', '.bt', function () {
         var text = $(this).next('div.panel');
       
         if (text.is(':hidden')) {
         text.slideDown('200');
         $(this).children('span').html('-');
         } else {
         text.slideUp('200');
         $(this).children('span').html('+');
         }
        });
 


Une autre manière de faire est de placer un écouteur sur la liste UL et tester la class de l'élément cliqué
Toujours en utilisant une class sur ton span, ça donne :

        $('#toggle-view').on('click', function (e) {
         if( $(e.target).hasClass('bt') ){
          var text = $(e.target).next('div.panel');
       
          if (text.is(':hidden')) {
          text.slideDown('200');
          $(this).children('span').html('-');
          } else {
          text.slideUp('200');
          $(this).children('span').html('+');
          }
         }
        });
 


note :
- lorsque tu postes du code, utilise le bouton <> de la barre d'édition, ce dernier bénéficie alors de la coloration syntaxique (j'ai modifié ton post)
- je te conseille d'utiliser un doctype pour ton fichier, par exemple

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
</body>
</html>
 

edit : si tu n'as pas de contraintes, tu devrais préférer la dernière version de jQuery (1.9.1 à ce jour)
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)