Question

我有一个自定义的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>

我错过了什么？

由于

Answer 1

试试这个（因为wordpress经常在no conflict mode中运行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);
});

Demo

Answer 2

你可以尝试灯箱http://lokeshdhakar.com/projects/lightbox2/ 或Twitter bootstrap http://getbootstrap.com/javascript/#modals 为此，部署非常简单快捷

Answer 3

您可以在＃wd-click上添加点击事件，但您的链接由＃wd-show

标识

Answer 4

它的页面加载速度更快......）：

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

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

Answer 5

好吧，我有一个非常通用的解决方案，对于脚本来说是精简和卑鄙的：p

如果jQuery的大小不同，你可以在不改变jQuery的情况下为每个id添加一个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 to above code

JS确切需要（我希望）

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

jsfiddle for OP's needs（最新链接）

Another variation I used on one of my portfolios.

在Wordpress页面中切换DIV

5 个答案: