Bonjour,
J'ai un menu sous la forme ci dessous auquel j'aimerai modifier l'icône des boutons <i class="caret-icon fa fa-caret-up"></i> en <i class="caret-icon fa fa-caret-down"></i>et vice versa en fonction du clic.
Problème c'est comment faire ?
J'ai ce script qui modifie bien l'icone mais pour tous les boutons caret.
Merci !
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <script> $(document).on('click', '.dropdown-btn', function () { $(".caret-icon").toggleClass('fa-caret-down fa-caret-up'); }) </script>
Code html : 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107 <div class="sidenav"> <img class="logo" src="/img/logo.png" alt="logo" /> <a href="/home.aspx"><span class="home">Accueil</span></a> <button class="dropdown-btn">Utilisateurs <i class="fa fa-user"></i> </button> <div class="dropdown-container"> <button class="dropdown-btn">Administration <i class="caret-icon fa fa-caret-up"></i> </button> <div class="dropdown-container"> <button class="dropdown-btn">Paramètres <i class="caret-icon fa fa-caret-up"></i> </button> <div class="dropdown-container"> <a href="/content/admin/DBManagement.aspx">Gestion de la BDD référence</a> <a href="/content/users/admin/admProfileGenerator.aspx">Générateur de profiles</a> <a href="/content/admin/dbcontacts/DBContactsView.aspx">Contacts</a> </div> <button class="dropdown-btn">Locks & Reset <i class="caret-icon fa fa-caret-up"></i> </button> <div class="dropdown-container"> <a href="/content/users/admin/admUnlockUser.aspx">Unlock Utilisateurs</a> <a href="/content/users/admin/admUser.aspx">Reset Creation_date</a> </div> <button class="dropdown-btn">Formulaires <i class="caret-icon fa fa-caret-up"></i> </button> <div class="dropdown-container"> <a href="/content/users/admin/admSvcUser.aspx">Compte de Service</a> <a href="/content/users/admin/admmodUser.aspx">Mod. Utilisateurs</a> <a href="/content/users/admin/admdelUser.aspx">Supprimer Utilisateurs</a> <a href="/content/users/admin/changeowner.aspx">Changer le propriétaire</a> </div> <a href="/content/users/admin/admMIUsers.aspx">Import en Masse</a> </div> <a href="/content/users/newUser.aspx">Nouveau</a> <a href="/content/users/modUser.aspx">Modification</a> <a href="/content/users/delUser.aspx">Suppression</a> </div> <button class="dropdown-btn">Support <i class="fa fa-headset"></i> </button> <div class="dropdown-container"> <button class="dropdown-btn">Attribution de profiles <i class="caret-icon fa fa-caret-up"></i> </button> <div class="dropdown-container"> <a href="/content/support/profiles/help.aspx">Aide</a> <a href="/content/support/profiles/profile_mgr.aspx">Attribution de profiles</a> <a href="/content/support/profiles/poles.aspx">1. Pôles</a> <a href="/content/support/profiles/profile.aspx">2. Profiles</a> <a href="/content/support/profiles/groups.aspx">3. Groupes</a> </div> </div> <button class="dropdown-btn">Outils <i class="fa fa-screwdriver-wrench"></i> </button> <div class="dropdown-container"> <button class="dropdown-btn">Active Directory <i class="caret-icon fa fa-caret-up"></i> </button> <div class="dropdown-container"> <a href="/content/tools/ad/adGroupMemberOf.aspx">Membre De...</a> <a href="/content/tools/ad/adBUStats.aspx">Stats : Utilisateurs / BU</a> </div> <button class="dropdown-btn">DHCP <i class="caret-icon fa fa-caret-up"></i> </button> <div class="dropdown-container"> <a href="/content/tools/dhcp/dhcp_res.aspx">Réservations DHCP</a> <a href="/content/tools/dhcp/dhcp_DEL.aspx">Suppression DHCP</a> <a href="/content/tools/dhcp/dhcp_log.aspx">Logs DHCP</a> </div> <button class="dropdown-btn">Scripts <i class="caret-icon fa fa-caret-up"></i> </button> <div class="dropdown-container"> <a href="/content/tools/scripts/scripts.aspx">Scripts</a> <a href="/content/tools/scripts/scripts_log.aspx">Logs Scripts</a> </div> </div> <button class="dropdown-btn">Maintenance <i class="fa fa-briefcase"></i> </button> <div class="dropdown-container"> <a href="/content/admin/exportbdd.aspx">Export BDD</a> </div> </div> <script> var dropdown = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } </script>
Partager