如何使用高级设置的jQuery打开边栏

Question

我创建了一个开放关闭动画，但它并没有完全实现我想要的。

我想不出如何解决以下问题：

1. 侧栏只能在单击放大镜图标时打开和关闭，而不是当我单击侧栏的蓝色区域时(例如，当我想在搜索框中键入某项内容或单击显示在其中的任何内容时)。
2. 显然，当侧加载时，我需要在放大镜图标上单击两次以打开侧边栏。真的不知道为什么

见以下JS Fiddle链接：

Answer 1

这是我自己博客的代码。演示这里。

正如你所看到的，当你第一次点击图标的时候，它会打开侧边栏。只需再次点击图标关闭它。下面是jQuery代码(可以改进)：

$('#icox').on('click', function() {
    $(this).children().toggleClass('active');
    $('#menux').toggleClass('active');
});

然后，在CSS中，您只需使用margin-left: -300px;或css3 transform: translate即可。

这两种方法都应该运行良好，但我认为CSS方法更好(在我看来) :)

下面是jsfiddle：http://jsfiddle.net/6H8xr/

Answer 2

您需要确保侧边栏在加载时具有"open“类。

html：

<div id="peek" class="open">

你的js：

$('#icox').on('click', function(){
  var $this = $("#peek");

我更新了你的小提琴http://jsfiddle.net/d69ne/4/

Answer 3

小提琴手：http://jsfiddle.net/Grimbode/d69ne/2/

1. 在此解决

你需要点击图片上的事件，而不是你的大型侧边栏。

$('#peek_img').on('click', function () {
    var $this = $('#peek');
    if ($this.hasClass('open')) {
        $this.animate({
            left: '0px'
        }, 500).removeClass('open');
    } else {
        $this.animate({
            left: -200
        }, 500).addClass('open');
    }
});

2在此解决

<div id="peek" class="open">