Javascript 在Wordpress页面中切换DIV

我有一个自定义的Wordpress模板。这可能是一个非常愚蠢的问题，但在一个页面（不是帖子）上，我想有4个图像，当它们被单击时，相应的隐藏div滑动打开，然后在再次单击图像时滑动关闭

我在一个单独的scripts.js文件中有这个文件（在模板footer.php文件中正确调用-它在那里，因此页面加载速度更快…）：

}))

我在页面上有这样的内容：

<a href="javascript:void(0)" id="wd-show"><img class="size-full wp-image-93" alt="" src="image.jpg" width="750" height="75" /></a>

<div class="info-div" id="wd-info" style="display: none;">...</div>

...

我错过了什么

谢谢，试试这个（因为wordpress经常在中运行jQuery，而不使用jQuery的$of）

你可以试试lightbox 或者推特引导 为此，部署起来非常简单和快速

您可以在#wd click上添加click事件，但您的链接由#wd show标识

它位于此处，因此页面加载速度更快……：

您可以缩短代码，它将减少页面大小，尽管影响很小

$(document).ready(function(){
  $('#wd-click').click(function(){
      $('#' + this.id.split('-')[0] + '-info' ).slideToggle();
  });
}) 

---

好的，我为你提供了一个非常通用的解决方案，它在脚本编写方面是精干和吝啬的：p

如果jQuery的大小不同，您可以在不更改jQuery的情况下为每个jQuery添加一个id

这可以用于任何元素，只要您更改它所选择的类

HTML

<div class="imageSlide">
  <span class="hidden">I'm a hidden image! :D</span>
</div>
<div class="imageSlide">
  <span class="hidden">I'm a hidden image! :D</span>
</div>
<div class="imageSlide">
  <span class="hidden">I'm a hidden image! :D</span>
</div>
<div class="imageSlide">
  <span class="hidden">I'm a hidden image! :D</span>
</div>

CSS

.imageSlide {
  width: 200px;
  height: 200px;
  background: mediumSeaGreen;
  float: left;
  margin-left: 10px;
  position: relative;
}

.imageSlide > span {
  display: none;
  position: absolute;
  bottom: 0;
}

#img1 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/web-design.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

#img2 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/seo.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

#img3 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/mobo.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

#img4 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/graphic-design.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

.info-div {
  position: relative;
  bottom: 0;
  width: 980px;
  padding: 10px;
  border: 1px dotted #CCC;
  background: #DFE9E7;
  margin: 30px 0;
  border-radius: 10px;
  display: none;
}

JSfiddle确切的需求（我希望）

CSS

.imageSlide {
  width: 200px;
  height: 200px;
  background: mediumSeaGreen;
  float: left;
  margin-left: 10px;
  position: relative;
}

.imageSlide > span {
  display: none;
  position: absolute;
  bottom: 0;
}

#img1 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/web-design.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

#img2 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/seo.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

#img3 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/mobo.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

#img4 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/graphic-design.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

.info-div {
  position: relative;
  bottom: 0;
  width: 980px;
  padding: 10px;
  border: 1px dotted #CCC;
  background: #DFE9E7;
  margin: 30px 0;
  border-radius: 10px;
  display: none;
}

（最新链接）

---

“我错过了什么？”什么不起作用？是否出现错误？是否放置了Jquerry库？是否需要将锚点id更改为wd click或将jquery目标更改为#wd show？没有绑定到“wd show”的单击事件。更改第一次单击事件或添加一个新事件：$（'#wd show'）。单击（function（）{$（'#wd info'）。slideToggle（）；}）；对不起，我应该早点提到这些div的wd-info、seo-info、mobo-info和gd-info-arenet实际上在切换-是的，一个jQuery库被调用-jsFiddle是-不用担心CSS，这很快就完成了-jQuery目标需要切换（wd-info等），希望这能让事情变得更清楚…谢谢，但是div需要在点击的图像下面，不在舱内。关闭，但不抽雪茄；）刚刚上传了第二个链接，它将在主div之外。它对我来说工作得很好，你有在Frameworks&Extensions下选择的库吗？它应该自动设置为这种方式，但什么是不工作的？以防万一你有一个小显示器。。试试这把小提琴。这不是显示器，它是24“我正在使用的iMac:）。我使用的是在WP头中调用的标准jQuery。js只是在我的模板中使用的额外脚本，但它们都使用标准jQuery。我不明白出了什么问题-我准确地复制了你的小提琴，但仍然没有在我的网站上工作。只是注意到，仍然没有使div切换。谢谢你指出这一点，tho:）我正试图避开Lightbox或PrettyTo，因为我不希望页面有覆盖效果。谢谢，tho:）@MarkTabner，在你的小提琴里，你没有你在JQueryI上的ID，我只显示了一个，如果这开始起作用，我想其他人会。。。

#img1 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/web-design.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

#img2 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/seo.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

#img3 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/mobo.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

#img4 {
  background: url(http://remowebdesign.co.uk/wp-content/uploads/2013/10/graphic-design.png);
  margin-bottom: 1px;
  width: 750px;
  height: 75px;
  border: 1px solid #000;
  border-radius: 5px;
}

.info-div {
  position: relative;
  bottom: 0;
  width: 980px;
  padding: 10px;
  border: 1px dotted #CCC;
  background: #DFE9E7;
  margin: 30px 0;
  border-radius: 10px;
  display: none;
}