0

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

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

$(document).ready(function(){

$('#wd-click').click(function(){
    $('#wd-info').slideToggle();
});

$('#seo-click').click(function(){
    $('#seo-info').slideToggle();
});

$('#mobo-click').click(function(){
    $('#mobo-info').slideToggle();
});

$('#gd-click').click(function(){
    $('#gd-info').slideToggle();
});

});

我在页面上有这个：

<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>

我错过了什么？

谢谢

4

5 回答 5

2

试试这个（因为 wordpress 经常在无冲突模式下运行 jQuery并且不使用 jQuery 的 $）

jQuery.noConflict()
jQuery(document).ready(function(){
    (function($){
    $('#wd-click').click(function(){
        $('#wd-info').slideToggle();
    });

    $('#seo-click').click(function(){
        $('#seo-info').slideToggle();
    });

    $('#mobo-click').click(function(){
        $('#mobo-info').slideToggle();
    });

    $('#gd-click').click(function(){
        $('#gd-info').slideToggle();
    });
    })(jQuery);
});

演示

于 2013-10-04T15:17:14.590 回答
0

您在 #wd-click 添加点击事件，但您的链接由 #wd-show 标识

于 2013-10-04T15:19:54.640 回答
0

它在那里，因此页面加载速度更快...）：

您可以缩短代码，它会减小页面大小，尽管它的影响非常小。

$(document).ready(function(){
  $('#wd-click').click(function(){
      $('#' + this.id.split('-')[0] + '-info' ).slideToggle();
  });
})
于 2013-10-04T15:20:32.360 回答
0

您可以尝试使用 lightbox http://lokeshdhakar.com/projects/lightbox2/ 或 twitter bootstrap http://getbootstrap.com/javascript/#modals ，部署起来非常简单快捷

于 2013-10-04T15:19:24.287 回答
0

好吧，我为您提供了一个非常通用的解决方案，该解决方案在脚本上精益求精：p

如果它们的大小不同等，您可以在不更改 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>

jQuery

$('.imageSlide').on('click', function() {
   $(this).children().stop(true).slideToggle('1000'); 
});

CSS

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

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

jsfiddle到上面的代码

有确切需求的JSfiddle（我希望）

CSS

#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;
}

满足 OP 需求的 jsfiddle（最新链接）

我在我的一个投资组合中使用的另一种变体。

于 2013-10-04T15:21:06.177 回答