Question

我创建了一个开放式动画，但它并没有完全符合我的要求。

我无法弄清楚如何解决以下问题：

仅当我点击放大镜图标时，侧边栏才会打开和关闭，而不是当我点击侧边栏的蓝色区域时（例如，当我想在搜索框中输入内容或点击显示在那里的任何内容时）。
当侧面加载时，我需要在放大镜图标上单击两次以打开侧边栏。真的不知道为什么：/

请参阅下面的JS Fiddle链接：

Answer 1

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

如您所见，第一次点击图标时，它会打开侧边栏。只需再次单击该图标即可将其关闭。这是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

您需要确保侧边栏在加载时具有“打开”类。

html：

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

和你的js：

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

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

Answer 3

jsfiddle：http://jsfiddle.net/Grimbode/d69ne/2/

在这里解决了

您需要点击图片上的活动，而不是巨大的侧边栏。

$('#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">

Answer 4

尝试以下方法：

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

使用：

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

编辑：使用jsfiddle

如何使用高级设置打开关闭带有jQuery的补充工具栏

4 个答案: