Comment afficher une div quand un sous menu a été cliqué svp ?

Petit nouveau ! | 2 Messages

11 nov. 2018, 14:32

Bonjour à tous,

Je créé actuellement un site et je cherche à savoir comment peut on afficher une div lorsqu'une sous catégorie d'une rubrique a été cliquée svp ?

Pour exemple :

Menu A comprend un sous menu B et C
Si l'utilisateur clique sur le sous-menu B ou C, alors j'affiche la div "div1",
Si l'utilisateur ne clique pas sur l'un des sous-menu, la div "div1" ne s'affiche pas...

Pour le sous menu, j'ai créé un :
<input class="essai" id ="sousmenu" name="sousmenunom" type="checkbox" value="">

J'ai pensé à la solution de récupérer la value de l'input, mais je n'arrive pas à comprendre comment y aboutir...
Mais il y a peut être d'autres solutions plus simples, ou évidentes...

Y a t il une personne qui saurait me sortir de ce désastre et m'aider svp ?

Merci à tous !

Avatar du membre
Mammouth du PHP | 1609 Messages

11 nov. 2018, 18:34

Salut, il s'agit ici plus de javascript et css.
Pour afficher masquer un bloc html tu peux jouer avec la propriété css display (block ou none).
Pour afficher le div au clic d'un lien par exemple avec jquery $('a#link-id').click(function(){ $('#div-id' }.show(); );
Tu as aussi les méthodes hide() (cacher) et toggle() (afficher si masqué et vis versa).
Ces 3 méthodes modifient la propriété css display pour afficher ou masquer le bloc.
En jquery pour avoir la valeur de l'input $('input[name="sousmenunom"]').val();
Développeur web depuis + de 20 ans

Petit nouveau ! | 2 Messages

12 nov. 2018, 10:19

Bonjour Saian et merci de ton aide :)

J'ai essayé de construire un code mais cela ne marche toujours pas ... :/

Voici mon code jquery, qui se trouve en lien externe, nommé monscript.js :

$('#sousmenu1').change(function(){
var affiche=$('input[name="sousmenunom"]').val();

if (val==0){
$('#div2').hide();
$('#div3').hide();
$('#div4').hide();
}else if (val>=1){
$("#div2").show();
$("#div3").show();
$("#div4").show();
};
});
});

Mon code php :
<div class="col-sm-8">
<ul class="list-unstyled"></ul>
<input class="sub-cat-field" id="sousmenu1" name="sousmenunom" type="hidden" value="">
<script type="text/javascript" src="https://www.monsiteinternet.fr/monscript.js"></script>
</div>
Pouvez vous me dire où j'ai pu encore me tromper svp ? Ou si j'ai oublier autre chose ?

Merci à vous :)

Avatar du membre
Mammouth du PHP | 1609 Messages

12 nov. 2018, 12:24

Salut ça pourrait être un tas de raison. Déjà as tu une erreur dans la console javascript ?
Le jquery est-il bien inclus ?
Comment est déclenché le changement de valeur de #sousmenu1 ?
D'où sort la variable "val" du code javascript montré ?
Développeur web depuis + de 20 ans