无法使JavaScript在Codepen演示中正常工作

Question

I'm not a coder but have found what I want to achieve on codepen. 我不是编码人员，但是找到了我想在Codepen上实现的目标。 I'm trying to combine the javascript with the html section on the demo page and have wrapped the js 我正在尝试将JavaScript与演示页面上的html部分结合起来，并包装好js

<script>js copied from right-hand pane</script>

and moved it to the left-hand html section. 并将其移至左侧的html部分。 I've tried it in the head and the body sections but it breaks the slide functionality. 我已经在头部和身体部分尝试过了，但是它破坏了幻灯片的功能。 Can anyone tell me what I'm doing wrong please? 谁能告诉我我做错了吗？

https://codepen.io/rstrahl/pen/eJZQej/ https://codepen.io/rstrahl/pen/eJZQej/

Thanks 谢谢

Answer 1

You have add the following tags too: 您也添加了以下标签：

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>

  $(".panel-left").resizable({ handleSelector: ".splitter", resizeHeight: false }); $(".panel-top").resizable({ handleSelector: ".splitter-horizontal", resizeWidth: false });

 html, body { height: 100%; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; padding: 0; margin: 0; overflow: auto; } .page-container { margin: 20px; } /* horizontal panel*/ .panel-container { display: flex; flex-direction: row; border: 1px solid silver; overflow: hidden; /* avoid browser level touch actions */ xtouch-action: none; } .panel-left { flex: 0 0 auto; /* only manually resize */ padding: 10px; width: 300px; min-height: 200px; min-width: 150px; white-space: nowrap; background: #838383; color: white; } .splitter { flex: 0 0 auto; width: 18px; background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353; min-height: 200px; cursor: col-resize; } .panel-right { flex: 1 1 auto; /* resizable */ padding: 10px; width: 100%; min-height: 200px; min-width: 200px; background: #eee; } /* vertical panel */ .panel-container-vertical { display: flex; flex-direction: column; height: 500px; border: 1px solid silver; overflow: hidden; } .panel-top { flex: 0 0 auto; /* only manually resize */ padding: 10px; height: 150px; width: 100%; white-space: nowrap; background: #838383; color: white; } .splitter-horizontal { flex: 0 0 auto; height: 18px; background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353; cursor: row-resize; } .panel-bottom { flex: 1 1 auto; /* resizable */ padding: 10px; min-height: 200px; background: #eee; } label { font-size: 1.2em; display: block; font-weight: bold; margin: 30px 0 10px; } pre { margin: 20px; padding: 10px; background: #eee; border: 1px solid silver; border-radius: 4px; overflow: auto; }

 <html> <head> <title>Simple Split Panels - jquery-resizable</title> <meta charset="utf-8"/> </head> <body style=""> <div class="page-container"> <h1> jquery-resizable - A simple splitter panel </h1> <hr /> <p> Simple example that demonstrates how to create slidable two-pane layouts <a href="http://caniuse.com/#search=flexbox">using FlexBox</a> and the resizable plug-in. Note that Flexbox is not required, but used here to keep the layout simple. </p> <label>Horizontal Splitter Panes:</label> <div class="panel-container"> <div class="panel-left"> left panel </div> <div class="splitter"> </div> <div class="panel-right"> right panel </div> </div> <label>Vertical Splitter Panes:</label> <div class="panel-container-vertical"> <div class="panel-top"> top panel </div> <div class="splitter-horizontal"> </div> <div class="panel-bottom"> bottom panel </div> </div> <hr /> <p> This example creates two resizables for the horizontal and vertical splitter panes: </p> <pre> &lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script src=&quot;../src/jquery-resizable.js&quot;&gt;&lt;/script&gt; &lt;script&gt; $(&quot;.panel-left&quot;).resizable({ handleSelector: &quot;.splitter&quot;, resizeHeight: false }); $(&quot;.panel-top&quot;).resizable({ handleSelector: &quot;.splitter-horizontal&quot;, resizeWidth: false }); &lt;/script&gt; </pre> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script> </body> </html>

无法使JavaScript在Codepen演示中正常工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-11-09 09:31:33

无法使JavaScript在Codepen演示中正常工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-11-09 09:31:33

解决方案1
0 已采纳 2018-11-09 09:31:33