Intégration d'un dashboard Part1

Kboirel
Javascript

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;}

2 réponses

Gribouille
Réponse acceptée

Etant donné que le menu "Utilisateurs" est un lien, quand tu cliques dessus, il recharge automatiquement la page. C'est pour cela que tu ne vois le menu déplié qu'une fraction de seconde. Ensuite, la page se recharge et donc le sous-menu disparaît car il est caché par défaut.

Pour éviter cela, il faut ajouter dans ta fonction on click, après la ligne "$(this).find('#icon').toggleClass('icon-angle-up');" un "return false;" qui va demander au navigateur de ne pas recharger la page.

Kboirel
Auteur

Arf en effet l'erreur de débutant ... J'aurais dû y penser ....
Merci beaucoup ! :)