Expression du "sans" dans un selecteur

Version imprimable

20/03/2009, 11h49
Larger

Expression du "sans" dans un selecteur
Bonjour,

J'ai une requete que je n'arrive pas a formuler.

Mon code html comprend des div ayant pour classe css "story". Ces "story " contiennent quelques elements html et une autre div qppelee "content".

Voici ce que j'utilise :
Code:

1 2 3 4 $(document).ready(function(){ $("div.middle_column div.story>div.content").toggle(); $("div.middle_column div.story").click(function(o){$(this).find("div.content").slideToggle("normal")}) })
Rien de tres complique, juste l'apparition/disparition de mon champ "content" quand je clique sur "story".

Mais moi je voudrais eviter que ca affecte le champ "content". Pas d'evenements en somme.

Comment puis-je formuler ca : selectionne le "story" sans le "content" ?

Merci

Bonsoir.

Si j'ai bien compris le problème, le code suivant devrait aider :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    <style type="text/css">
        div.middle_column {
            margin:12px;
            padding:12px;
            width:500px;
            border:1px solid green;
        }
        div.story {
            margin:12px;
            padding:12px;
            width:400px;
            border:1px solid blue;
        }
        div.content {
            margin:12px;
            padding:12px;
            width:350px;
            height:50px;
            border:1px solid red;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div.content").click(function(){                
                return false;
            });
 
            $("div.story").click(function(){                
                $(this).find("div.content").toggle();
                return false;
            });
        });
    </script>
</head>
<body>
    <div class="middle_column">
        <p>La division middle_column</p>
        <div class="story">
            <p>La première div story.</p>
            <div class="content">
                <p>Première div content incluse dans la première div story.</p>
            </div>
        </div>
        <div class="story">
            <p>La seconde div story.</p>
            <div class="content">
                <p>Première div content incluse dans la seconde div story.</p>
            </div>
        </div>
    </div>
</body>
</html>

23/03/2009, 10h59
Larger

Tout a fait !

Ca marche impeccable. Merci beaucoup :yaisse2:
23/03/2009, 11h59
Larger

J'ai parle trop vite !

Le souci c'est que ca inhibe l'action de mes boutons a l'interieur de ma division content ...

Finalement c'etait tout bete, le tout etait de rajouter une division a ma story : title. Il aurait meme plutot ete logique d'en mettre une la des le depart mais passons ...
Code:

1 2 3 4 5 6 7 8 <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("div.middle_column div.story>div.content").toggle(); $("div.middle_column div.story div.title").click(function(o){$(this).parent().find("div.content").slideToggle("normal")}) if (location.hash) $("a#"+location.hash.substr(1)).next().find("div.content").toggle() }) </script>