按钮在加载时消失

Question

有人可以告诉我为什么我的“切换”按钮在页面加载后消失了吗？单击时关闭/打开我的滑动面板。它首先可见一秒钟然后在页面加载时消失。 Here is the JSFiddle link

$('.toggle').toggle(function() {
  $('#one').animate({
    width: 0
  });
  $('#two').animate({
    left: 0
  });
}, function() {
  $('#one').animate({
    width: 200
  });
  $('#two').animate({
    left: 200
  });
})

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

#one,
#two {
  position: absolute;
}

#one {
  top: 0px;
  width: 200px;
  bottom: 0px;
  background-color: lime;
}

#two {
  top: 0px;
  left: 200px;
  right: 0;
  bottom: 0px;
  background-color: pink;
}

#toggle {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='one'></div>
<div id='two'>

  <p>
    test
  </p>
  <p>
    <a href="" class='toggle'>Toggle</a>
  </p>
</div>

Answer 1

因为您没有切换div而不是按钮，所以您应该click按钮.toggle，然后检查width的{​​{1}}隐藏或显示左侧小组我希望这是你想要实现的目标

＆＃13;

＆＃13;

#one

＆＃13;

$('.toggle').on('click', function() {

  if ($('#one').width()) {
    $('#one').animate({
      width: 0,
    });
    $('#two').animate({
      left: 0,
    });
  } else {
    $('#one').animate({
      width: 200,
    });
    $('#two').animate({
      left: 200
    });
  }
});

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

#one,
#two {
  position: absolute;
}

#one {
  top: 0px;
  width: 200px;
  bottom: 0px;
  background-color: lime;
}

#two {
  top: 0px;
  left: 200px;
  right: 0;
  bottom: 0px;
  background-color: pink;
}

#toggle {
  position: relative;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

因为你打电话自己切换。

尝试使用：

roads_match_array

而不是：

$('.toggle').hover

你会发现差异。

其他问题是toogle按钮位于div内。必须放在外面的div。

查看文档： http://api.jquery.com/toggle/