Bonjour, je viens de suivre le tutoriel concernant l'intégration d'un dashboard en HTML/CSS (très intéréssant au passage!).
Arrivé au jquery, je rencontre un petit souci :
le sous-menu et l'icone se changent bien au click, mais seulement une demi-seconde. Après, la class reprend la valeur hide et l'icon la valeur "up" ...
Avez-vous une idée de pourquoi est-ce que je rencontre ce problème ?
Voici mon code html:
<body>
<header>
<div id="logo"><img src="img/icons/code.png" alt=""> Panel <span>Admin</span> </div>
<div id="crumb">Dashboard / </div>
<div id="user">4 Saisons en Provence <img src="img/logo.png" alt=""></div>
</header>
<nav>
<div class="menu">
<a href=""> Dashboard</a>
</div>
<div class="submenu" id="submenu">
<a href="">Utilisateurs <i class="icon-angle-down right" id="icon"></i></a>
<div class="subcontent hide" id="subcontent">
<a href="">Ajouter Utilisateur</a>
<a href="">Ajouter Utilisateur</a>
</div>
</div>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
Mon code js:
$(function(){
$(document).on('click',"#submenu", function(){
$(this).find('#subcontent').toggleClass('show');
$(this).find('#subcontent').toggleClass('hide');
$(this).find('#icon').toggleClass('icon-angle-down');
$(this).find('#icon').toggleClass('icon-angle-up');
})
})
Et mon code CSS:
.hide{display: none;}
.show{display: block;}
html{
font-family: 'Open Sans', 'sans-serif';
}
header{
height: 70px;
background-color: #2494f2;
}
#logo{
line-height: 70px;
height: 70px;
width: 230px;
background-color: #36a3ff;
text-align: center;
color:#fff;
font-size: 18px;
float: left;
margin-right: 50px;
}
#logo span{font-weight: 600;}
#logo img{vertical-align: middle;}
#crumb{
margin-left: 50px;
line-height: 70px;
color:#fff;
float: left;
}
#user{
float: right;
color:#fff;
line-height: 70px;
}
#user img{
width: 30px;
height: 30px;
margin: 0 50px 0 10px;
vertical-align: middle;
}
nav{
position: absolute;
top: 70px;
left: 0;
bottom: 0;
width: 230px;
background-color: #272930;
}
.menu a, .submenu a{
display: block;
height: 40px;
line-height: 40px;
padding-left: 40px;
border-top: 1px solid #32353e;
border-bottom: 1px solid #000;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
}
.submenu .right{float: right;padding-right: 15px;}
.menu a:hover, .submenu a:hover{
background-color: #2a2c34;
border-right: 2px solid #2494f2;
}
.subcontent{background-color: #1a1c20;}
.subcontent a{border:inherit;height: 30px;line-height: 30px;}