如何为此制作侧边栏？

Question

我正在尝试修复侧边栏，使其在单击时显示和消失。

你能帮我一下吗？ ！ ！

这是HTML代码：

        <div id="left">     <div class="moduletable">
                            <div class=" modtit">По материалу</div>
                        <ul class="nav menu">
<li class="item-118"><a href="/metallicheskie-dveri.html" >Металлические двери</a></li><li class="item-119"><a href="/derevyannye-dveri.html" >Клееный брус</a></li><li class="item-121"><a href="/plastikovye-dveri.html" >Пластиковые двери</a></li><li class="item-122"><a href="/shponirovannye-dveri.html" >Шпонированные двери</a></li><li class="item-157"><a href="/massiv-drevesiny.html" >Массив древесины</a></li></ul>
        </div>
            <div class="moduletable">
                            <div class=" modtit">Фурнитура</div>
                        <ul class="nav menu">
<li class="item-163"><a href="/catalog-ruchek.html" >Каталог дверных ручек</a></li><li class="item-164"><a href="/zamki.html" >Замки и защелки</a></li><li class="item-165"><a href="/koroba.html" >Наличники и короба</a></li><li class="item-166"><a href="/arki.html" >Арки</a></li><li class="item-167"><a href="/lestnitsy.html" >Лестницы</a></li></ul>
        </div>
            <div class="moduletable diz">
                            <div class=" modtit">По дизайну</div>
                        <ul class="nav menu">
<li class="item-136"><a href="/barokko.html" >Барокко</a></li><li class="item-137"><a href="/klassika.html" >Классика</a></li><li class="item-158"><a href="/ampir.html" >Ампир</a></li><li class="item-159"><a href="/minimalizm.html" >Минимализм</a></li><li class="item-160"><a href="/pop-art.html" >Поп-арт</a></li><li class="item-161"><a href="/eklektika.html" >Эклектика</a></li><li class="item-162"><a href="/modernn.html" >Модерн</a></li></ul>
        </div>
            <div class="moduletable">
                            <div class=" modtit">По производителю</div>
                        <ul class="nav menu">
<li class="item-156"><a href="/buldoors.html" >Бульдорс</a></li></ul>
        </div>
    </div>            <div id="right">
                <div class="right_top">     <div class="moduletable">
                            <div class=" modtit1">Мы предоставляем комплекс услуг</div>

这是我的jQuery：

$('#left').on('click', function(){
    $('.moduletable').toggle('slide', { direction: 'left' }, 1000);
    $('#main-content').animate({
        'margin-left' : $('#main-content').css('margin-left') == '0px' ? '210px' : '0px'
    }, 1000);
});

Answer 1

您可以使用此代码。

 jQuery('#left .moduletable').on('click', function(){ jQuery(this).find('ul.nav').slideToggle( "slow"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="left"> <div class="moduletable"> <div class=" modtit">По материалу</div> <ul class="nav menu"> <li class="item-118"><a href="/metallicheskie-dveri.html" >Металлические двери</a></li> <li class="item-119"><a href="/derevyannye-dveri.html" >Клееный брус</a></li> <li class="item-121"><a href="/plastikovye-dveri.html" >Пластиковые двери</a></li> <li class="item-122"><a href="/shponirovannye-dveri.html" >Шпонированные двери</a></li> <li class="item-157"><a href="/massiv-drevesiny.html" >Массив древесины</a></li> </ul> </div> <div class="moduletable"> <div class=" modtit">Фурнитура</div> <ul class="nav menu"> <li class="item-163"><a href="/catalog-ruchek.html" >Каталог дверных ручек</a></li> <li class="item-164"><a href="/zamki.html" >Замки и защелки</a></li> <li class="item-165"><a href="/koroba.html" >Наличники и короба</a></li> <li class="item-166"><a href="/arki.html" >Арки</a></li> <li class="item-167"><a href="/lestnitsy.html" >Лестницы</a></li> </ul> </div> <div class="moduletable diz"> <div class=" modtit">По дизайну</div> <ul class="nav menu"> <li class="item-136"><a href="/barokko.html" >Барокко</a></li> <li class="item-137"><a href="/klassika.html" >Классика</a></li> <li class="item-158"><a href="/ampir.html" >Ампир</a></li> <li class="item-159"><a href="/minimalizm.html" >Минимализм</a></li> <li class="item-160"><a href="/pop-art.html" >Поп-арт</a></li> <li class="item-161"><a href="/eklektika.html" >Эклектика</a></li> <li class="item-162"><a href="/modernn.html" >Модерн</a></li> </ul> </div> <div class="moduletable"> <div class=" modtit">По производителю</div> <ul class="nav menu"> <li class="item-156"><a href="/buldoors.html" >Бульдорс</a></li> </ul> </div> </div> <div id="right"> <div class="right_top"> <div class="moduletable">