从左边切换菜单

Question

当我点击一个链接时，我试图从左边得到一个可以滑动的菜单。我一直在跟踪JSFiddle，但没有成功。div保持在一个点上，不滑动。根据这个例子，div应该被隐藏起来，然后通过单击滑入视图，然后当我再次单击时滑出。它从隐藏开始，然后进入视图而不滑动，也不向后滑动。我是jQuery的新手，但一直在努力学习。

在我的母版页中，我设置了该页的脚本：

<script src="/Scripts/jquery-1.11.1.js" type="text/javascript" ></script>     
<script type="text/javascript"  >
  $(document).ready(function () {
    $("#click").click(function () {
      $("#slider").toggle("slide", {
        direction: "left",
        distance: 280
      }, 500);
    });
  });
</script>
<a id="click" href="#" runat="server" style="position:relative;top:0px;">Slide</a>
<div id="wrapper">
 <div id="box">
  <div id="slider" runat="server" class=" divColCtr RoundBorder" style="display:none">
   //controls inside here
  </div>
 </div>
</div>

这是我在主页上尝试的问题吗？我需要一个菜单为每一页，不想认为我必须添加到每一页，但如果是这样，那么这是好的。

Answer 1

您要复制的小提琴的一个要求是: jQuery UI 1.9.2

这可以在这里下载：http://blog.jqueryui.com/2012/11/jquery-ui-1-9-2/

在jsFiddle的左侧，您可以看到外部需求/依赖关系。

将其包含在jquery引用之后，应该会很好。

将此作为您的代码：

    <script src="http://code.jquery.com/jquery-1.11.0.min.js" ></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" 
></script> 


<script type="text/javascript"  >
  $(document).ready(function () {
    $("#click").click(function () {
      $("#slider").toggle("slide", {
        direction: "left",
        distance: 280
      }, 500);
    });
  });
</script>
<a id="click" href="#" runat="server" style="position:relative;top:0px;">Slide</a>
<div id="wrapper">
 <div id="box">
  <div id="slider" runat="server" class=" divColCtr RoundBorder" style="display:none">
   //controls inside here
  </div>
 </div>
</div>