Un petit problem de sidebar jQuery !

omar berrayti
Javascript

Slùt ,,

J'ai trouvé un petit problem lorsque j'étais en train de developper une petit admin panel

Donc , j'ai un side bar , et les element comme dans le code suivant

<div class="container">

    <div class="sidebar">
        <ul>
            <li>
                <a href="#" id="toggle"><div class="menu">
                    <img src="img/inbox.png">Dashboard
                </div></a>
                <div class="sub_menu">
                    <ul>
                        <li><a href="#">Forms</a></li>
                        <li><a href="#">Links</a></li>
                        <li><a href="#">Charts</a></li>
                        <li><a href="#">Typographie</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#" id="toggle"><div class="menu">
                    <img src="img/inbox.png">Dashboard
                </div></a>
                <div class="sub_menu">
                    <ul>
                        <li><a href="#">Forms</a></li>
                        <li><a href="#">Links</a></li>
                        <li><a href="#">Charts</a></li>
                        <li><a href="#">Typographie</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#" id="toggle"><div class="menu">
                    <img src="img/inbox.png">Dashboard
                </div></a>
                <div class="sub_menu">
                    <ul>
                        <li><a href="#">Forms</a></li>
                        <li><a href="#">Links</a></li>
                        <li><a href="#">Charts</a></li>
                        <li><a href="#">Typographie</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#"><div class="menu">
                    <img src="img/inbox.png">Dashboard
                </div></a>
            </li>
            <li>
                <a href="#"><div class="menu">
                    <img src="img/inbox.png">Dashboard
                </div></a>
            </li>
        </ul>
    </div>

au niveau du js j'ai fais ça 

jQuery(function($){

    //$("#datepicker").datepicker();
    /**
    * SideBar Toggle Menu
    **/
    $('#toggle').click(function(){
        $(this).next('div.sub_menu').slideToggle('slow');
        return false;
    });
});

Mais non ce que je veux , c'est lorque je click sur le lien #toggle
le div .sub_menu(display:none; au niveau du css) s'affiche
et lorsque je click sur un autre lien , le div disparaît(avec l'effet slide) et s'affiche le div apres le lien :)

Merci :)

2 réponses

extrarox
Réponse acceptée

Bonsoir,

Déjà il y a plein de fautes syntaxique dans le code, genre les div dans les <a></a>...

Mais en admettant, déjà il faut éviter les ids identiques, donc au lieu de id="toggle", mets class="toggle".

Pour le code jquery ça donne :

jQuery(function($){
    $('.toggle').each(function(){
        $(this).click(function(){
            $('div.sub_menu').each(function(){
                $(this).slideUp('slow');
            });
            $(this).next('div.sub_menu').slideToggle('slow');
            return false;
        });
    });

});

A+

omar berrayti
Auteur

@extrarox : Merci bcp,
Pour les fautes syntaxique j vais les coriger bientot :)
Merci !