让jQuery在Wordpress中工作时遇到麻烦
Trouble with getting the jQuery to work in Wordpress
无论
我做什么，我似乎都无法在WordPress中工作。 在WordPress之外一切正常，但是当我将所有内容放入JS/jQuery时，将无法运行。这是我需要它来工作演示的链接。谁能为我阐明这一点？我把我的JS/jQuery放在页脚.php，在页眉.php，到处都没有。这是代码...
<style type="text/css">
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background: #fff;
}
#body-container {
width: 100%;
height: 100%;
padding: 180px;
font-family: Arial;
}
.dropMenu {
width: 100%;
height: 260px;
background: #ddd;
cursor: pointer;
}
.dropMenu img{
cursor: pointer;
padding:20px 20px 10px 20px ;
float: left;
max-width: 100%;
min-width: 30%;
}
#event1, #event2, #event3, #event4 {
margin-bottom: 10px;
}
.left-side {
float: left;
margin: 18px;
font-weight: bold;
font-family: Arial;
}
.SMtext {
color: #000;
font-size: 23px;
}
#event-day {
font-style: normal;
text-decoration: none;
font-size: 20px;
}
#event-time{
font-style: normal;
text-decoration: none;
font-size: 20px;
}
#hamburger {
width: 60px;
height: 30px;
background-color: #ddd;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
float: right;
margin: 10px;
}
#hamburger span {
background-color: #ddd;
display: block;
position: absolute;
height: 5px;
width: 100%;
border-radius: 9px;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
#hamburger span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger span:nth-child(2) {
top: 18px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger span:nth-child(3) {
top: 36px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
.open #hamburger span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -3px;
left: 8px;
}
.open #hamburger span:nth-child(2) {
top: 36px;
position: relative;
opacity: 0;
}
.open #hamburger span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 39px;
left: 8px;
}
.content {
width: 100%;
margin: 0px auto;
display: none;
background-color: #ddd;
}
.content p {
color: #000;
font-weight: bold;
line-height: 150%;
text-align: justify;
padding: 20px 20px;
}
hr {
width: 96%;
margin-left: auto;
margin-right: auto;
height: 2px;
color:#bdbdbd;
opacity: 0.6;
}
.details {
color: #000;
font-weight: bold;
float: left;
font-size: 20px;
padding-top: 20px;
padding-left: 20px;
}
.menu a {
color: #000;
font-weight: bold;
float: left;
font-size: 20px;
padding-top: 20px;
padding-left: 20px;
text-decoration: none;
}
.right-side{
float: right;
margin: 10px 20px;
font-family: Arial;
}
.event-price {
font-size: 60px;
font-weight: bold;
color: #CD3942;
padding-left: 25px;
}
.details-btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
color: #ffffff;
font-size: 20px;
background: #A4C739;
padding: 10px 20px 10px 20px;
text-decoration: none;
margin-top: 115px;
}
.details-btn:hover {
background: #222;
text-decoration: none;
}
.event-order-btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
background: #A4C739;
padding: 10px 20px 10px 20px;
text-decoration: none;
float: right;
margin: 0px 20px;
}
.event-order-btn:hover {
background: #222;
text-decoration: none;
}
</style>
<div id="event-container">
<div id="body-container">
<div id="event1">
<div class="dropMenu" onClick="ToggleIt(this)">
<img src="http://www.jshuadvd.com/din8/wp-content/uploads/2014/11/event4.jpg" />
<div class="left-side">
<div class="SMtext">RESTAURANT NAME</div><br />
<div id="event-day"><i class="icon-circle-calendar"> SATURDAY, DECEMBER 20, 2014</i></div><br />
<div id="event-time"><i class="icon-circle-clock"></i> 7:00 PM - 8:00 PM</div>
</div>
<div class="right-side">
<div class="event-price">$ 90</div>
<div class="details-btn">VIEW DETAILS</div>
</div>
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content" id="content1">
<hr>
<div class="details">EVENT DETAILS</div>
<br />
<br />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br />
<br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<br />
<br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<div class="menu">
<a href="#">MENU</a>
</div>
<div>
<a href="" class="event-order-btn">I WANT TO DINATE</a>
</div>
<br />
</p>
</div>
</div>
<div id="event2">
<div class="dropMenu" onClick="ToggleIt(this)">
<img src="http://www.jshuadvd.com/din8/wp-content/uploads/2014/11/event11.jpg" />
<div class="left-side">
<div class="SMtext">RESTAURANT NAME</div><br />
<div id="event-day"><i class="icon-circle-calendar"> SATURDAY, DECEMBER 20, 2014</i></div><br />
<div id="event-time"><i class="icon-circle-clock"></i> 7:00 PM - 8:00 PM</div>
</div>
<div class="right-side">
<div class="event-price">$ 90</div>
<div class="details-btn">VIEW DETAILS</div>
</div>
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content" id="content1">
<hr>
<div class="details">EVENT DETAILS</div>
<br />
<br />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br />
<br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<br />
<br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<div class="menu">
<a href="#">MENU</a>
</div>
<div>
<a href="" class="event-order-btn">I WANT TO DINATE</a>
</div>
<br />
</p>
</div>
</div>
<div id="event3">
<div class="dropMenu" onClick="ToggleIt(this)">
<img src="http://www.jshuadvd.com/din8/wp-content/uploads/2014/11/event21.jpg" />
<div class="left-side">
<div class="SMtext">RESTAURANT NAME</div><br />
<div id="event-day"><i class="icon-circle-calendar"> SATURDAY, DECEMBER 20, 2014</i></div><br />
<div id="event-time"><i class="icon-circle-clock"></i> 7:00 PM - 8:00 PM</div>
</div>
<div class="right-side">
<div class="event-price">$ 90</div>
<div class="details-btn">VIEW DETAILS</div>
</div>
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content" id="content1">
<hr>
<div class="details">
EVENT DETAILS
</div>
<br />
<br />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br />
<br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<br />
<br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<div class="menu">
<a href="#">MENU</a>
</div>
<div>
<a href="" class="event-order-btn">I WANT TO DINATE</a>
</div>
<br />
</p>
</div>
</div>
<div id="event4">
<div class="dropMenu" onClick="ToggleIt(this)">
<img src="http://www.jshuadvd.com/din8/wp-content/uploads/2014/11/event31.jpg" />
<div class="left-side">
<div class="SMtext">RESTAURANT NAME</div><br />
<div id="event-day"><i class="icon-circle-calendar"> SATURDAY, DECEMBER 20, 2014</i></div><br />
<div id="event-time"><i class="icon-circle-clock"></i> 7:00 PM - 8:00 PM</div>
</div>
<div class="right-side">
<div class="event-price">$ 90</div>
<div class="details-btn">VIEW DETAILS</div>
</div>
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content" id="content1">
<hr>
<div class="details">
EVENT DETAILS
</div>
<br />
<br />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br />
<br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<br />
<br />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<div class="menu">
<a href="#">MENU</a>
</div>
<div>
<a href="" class="event-order-btn">I WANT TO DINATE</a>
</div>
<br />
</p>
</div>
</div>
</div>
</body>
<!------------ Begin JavaScript ------>
<script type='text/javascript'>
function ToggleIt(elem) {
$(elem).toggleClass('open').next().slideToggle();
}
</script>
<!------------ End JavaScript ---------->
将
$更改为jQuery
function ToggleIt(elem) {
jQuery(elem).toggleClass('open').next().slideToggle();
}
在主题目录中functions.php中首先添加以下内容：
function add_my_script() {
wp_register_script('my_script', home_url() . '/wp-content/themes/mythemename/js/jquery.js', array( 'jquery' ));
wp_enqueue_script('my_script');
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );
将页面中的$更改为jQuery后：
<script>
jQuery.noConflict();
function ToggleIt(elem) {
jQuery(elem).toggleClass('open').next().slideToggle();
}
</script>
添加 jquery 的最佳方法是在 functions.php 文件中。
仅更改/wp-content/themes/mythemename/js/jquery.js//当你提到事件时，你的jquery脚本的路径.js
相关文章：
- 使用JavaScript获取Google地图上显示的所有推文时遇到麻烦
- 在 Javascript 中添加数字时遇到麻烦
- 使用 Coffeescript 和 Express .js 将变量传递给 Jade 时遇到麻烦
- 编写正确的 jQuery 插件时遇到麻烦
- 在三.js中更改纹理时遇到麻烦
- 从 javascript 中的函数返回时遇到麻烦
- 理解 $.ajax(） 参数以获取 PHP 变量时遇到麻烦
- 比较数组时遇到麻烦
- 使 JavaScript 函数工作时遇到麻烦
- 在Firefox和IE中获取CSS属性时遇到麻烦
- 将 Blueimp Gallery 与 HTML 和 Bootstrap 集成时遇到麻烦
- 将jQuery导入WordPress时遇到麻烦
- 在解决来自 coderbyte 的 JavaScript 编码挑战时遇到麻烦
- 从页面抓取时遇到麻烦
- 让jQuery在Wordpress中工作时遇到麻烦
- 在codeigniter框架中添加css和js文件时遇到麻烦
- 处理由dayClick返回的日期时遇到麻烦
- 在使用jQuery更改依赖于滚动位置的类时遇到麻烦
- 在使用javascript加速滚动动画时遇到麻烦
- 在跨域jquery/Ajax服务调用中遇到麻烦
