Question

在我目前的项目中，我需要你的帮助。

我想给我的img button一个“副作用”，这应该是互动的。例如，它必须在点击时监听事件，并且应该通过单击img来打开和关闭。我几乎不想让这件事情发生。不幸的是，我的编码出了点问题。它应该隐藏所有div id="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>

这是我的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);
});

以下是它应该是什么样子

enter image description here

如何为补充工具栏制作幻灯片效果

0 个答案: