Javascript 如何为边栏制作幻灯片效果

伙计们，我现在的项目需要你们的帮助

我想给我的

img按钮

一个“副作用”，应该是互动的。 例如，它必须在单击时侦听事件，并应通过单击

img

打开和关闭。我几乎不想让这件事发生。不幸的是，我的编码有问题。它应该隐藏所有

divid=“left”

元素，因为我正在为这个项目进行响应性设计

伙计们，我需要你们的帮助。我可能认为我的方法是完全错误的，也许你还有其他建议

以下是我的HTML代码：

<div id="main">
    <!-- This img "button" should do slide effect to the right side -->
    <img class="door_open" src="/templates/shablon/images/door_open.png">

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

这是它的样子

---

你是什么意思？@SankarshMakam绝对是！这正是我的意思

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