如何在锚定标记的同时打开和关闭div元素

Question

下面是我的html格式我想打开leftbar同时点击的div标签open-left标记，也靠近leftbar div标签，同时点击的open-left的标签。

    <div id="leftbar" class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <br />
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                        <img src="assets/img/nloop-min.png" alt="" class="drawer-logo" />
                    </div>
                    <br />
                    <ul>
                        <li><a href="#"><i class="fa fa-home fa-1x"></i>&emsp;Home</a></li>
                        <li><a href="#"><i class="fa fa-dot-circle-o fa-1x"></i>&emsp;Tour</a></li>
                        <li><a href="#"><i class="fa fa-bullseye fa-1x"></i>&emsp;FAQ</a></li>
                        <li><a href="#"><i class="fa fa-magic fa-1x"></i>&emsp;About</a></li>
                        <li><a href="#"><i class="fa fa-comment-o fa-1x"></i>&emsp;Contact</a></li>
                    </ul>
                    <br />
                    <p>
                        &copy; 2013 - nLoop</p>
                </div>
            </div>
        </div>
        <div id="content" class="snap-content">
                <div id="sidebarmenu" class="col-lg-1 col-sm-1 col-xs-1 col-md-1">
                    <a href="#" id="open-left"></a>
                </div>
                <div id="rightpart" class="margingap">
            Right part
                </div>
        </div>

    <script type="text/javascript">
            var snapper = new Snap({
                element: document.getElementById('content'),
                disable: 'right'
            });
            $(document).ready(function () {
                var addEvent = function addEvent(element, eventName, func) {
    if (element.addEventListener) {
        return element.addEventListener(eventName, func, false);
    } else if (element.attachEvent) {
        return element.attachEvent("on" + eventName, func);
    }
};

addEvent(document.getElementById('open-left'), 'click', function () {

    snapper.open('left');

        var state = $(this).is('.open');
       if (state) {
            snapper.close('left');
        }
});

            });

        </script> 

Answer 1

在克隆锚标记时打开和关闭div元素：

$("#open-left").click(function(){
    $("#leftbar").toggle();
});

在这里查看更多相关信息： .toggle（）文档

代码说明：

我只是将一个click事件附加到#open-left标签，然后我调用.toggle()上的#leftbar .toggle() 。 这几乎记录了对象，隐藏或显示的当前状态，然后根据状态调用特定函数。

另外，请看这个工作示例： 小提琴 。

Answer 2

你可能正在寻找像jQuery的hide（）和show（）这样的东西吗？ 或者切换（） ？

Answer 3

尝试这个：

var isOpen = false;
$("#open-left").click(function(){
    if(isOpen){
       $("#leftbar").slideUp(); isOpen = false;}
    else{ $("#leftbar").slideDown(); isOpen = true; }
});