Tout réafficher après suppression de "étirer"

**laurentSc** · 08/11/2013, 10h33

Bon, hier, j'ai eu aucun temps à y consacrer...

mon code, c'est quasiment celui que j'avais montré le 30/10 à 16h40, mais cela dit, il y a quand même eu quelques améliorations :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title></title>
    <style>
      .panel .contenu {
    display:none;    
}
 
.panel.expanded .contenu {
    display:block;
    position:absolute;
    background: #CCC;
    padding: 1em;
}
 
.panel .panel-toggle-btn:before {
    content:"Ouvrir";
}
 
.panel.expanded .panel-toggle-btn:before {
    content:"Fermer";
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 
    <script>function expand($panelToOpen){
  $(".panel").not($panelToOpen).removeClass("expanded");
  $panelToOpen.toggleClass("expanded");  
}
 
function init() {
$(document).ready(function(){
 
    var panelToExpand=4;//DÃ©plie le premier panel par dÃ©faut
    var match = window.location.hash.match(/expanded=(\d+)/);
    if(match != null && match[1] != null){
        panelToExpand = parseInt(match[1]);      
    }  
    expand( $(".panel").eq(panelToExpand) );
 
    $(".panel").each(function(p){
        $(this).find('.panel-toggle-btn').on('click', function(e){
            e.preventDefault();
            expand( $(this).closest('.panel') );
            window.location.hash = "expanded="+p;
        });
    });
	 });
};
 
</script>
 
  </head>
  <body>
 
 
  <script>window.onload=init;</script>
 
 
 <div class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
test1
  </div>
  </div>
  <div class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test2
  </div>
  </div>
  <div class="panel">
  <a class="panel-toggle-btn" href="#"></a>
  <div class="contenu">
      test3
  </div>
  </div>
 
  </body>
 
</html>

Comme j'ai du mal à comprendre ce code, le déboguer va être difficile. Je suis donc tenté de refaire ça, mais sans jQuery (js "simple"+CSS). Qu'en penses-tu ?

**SpaceFrog** · 08/11/2013, 10h44

Qu'en penses-tu ?

40 posts pour ça ...

faudrait peut être revoir les bases ???

**Bovino** · 08/11/2013, 10h50

js "simple"+CSS

Juste des trucs dont tu expliques depuis des mois que tu n'as pas envie de les apprendre !

**laurentSc** · 08/11/2013, 10h55

Envoyé par SpaceFrog

faudrait peut être revoir les bases ???

En effet, j'envisage d'élaborer moi-même (donc je comprendrai) une version plus "basique" (notamment sans jQuery)

Envoyé par Bovino

Juste des trucs dont tu expliques depuis des mois que tu n'as pas envie de les apprendre !

Pas que j'ai pas envie, mais que j'ai pas le temps

(mais apprendre des choses que je dois utiliser sur un cas concret, ça me motive)

**NoSmoking** · 08/11/2013, 11h12

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function init() {
  $(document).ready(function(){
    //...
  });
};
window.onload=init;

PS: c'est quoi au fait la faq

**laurentSc** · 08/11/2013, 14h27

C'est sûr que ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

en le remplaçant par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

ça a arrangé les choses ; je sais plus où j'avais trouvé le lien d'avant, mais je l'avais pas inventé...

et j'ai un peu simplifié la suite (ça datait d'un essai antérieur ; ça servait à rien mais ne nuisait pas) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function init() {
...
};
 
</script>
 
  </head>
  <body>
 
 
  <script>window.onload=init;</script>

Le <script>window.onload=init;</script> est équivalent à <body onload="init()";> et résulte d'une vieille habitude (un outil où je ne pouvais pas modifier la ligne <body>) et du coup, comme le code de SylvainPV marche et qu'il n'y a donc plus de debug à faire, je pense essayer de l'adapter à mon besoin...(mais j'essaierai quand même de le faire aussi sans jQuery (quand j'aurais le temps

, mais je pense, une bonne formule d'apprentissage que de travailler sur un cas concret qui utilise ce qu'on souhaite apprendre)).

**laurentSc** · 08/11/2013, 15h05

J'essaie d'adapter le code de SylvainPV à mon besoin et je rencontre déjà un problème, mais comme le titre de discussion ne va pas du tout, je la clos et en crée une nouvelle...

Tout réafficher après suppression de "étirer"

JavaScript

Discussions similaires

Partager

Partager