在Wordpress页面切换DIV

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的经常运行的jQuery在no conflict mode，不使用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的引导http://getbootstrap.com/javascript/#modals 为此，真的很容易，部署也很快

Answer 3

你在＃WD-新增点击事件，但您的链接是通过＃WD-秀鉴定

Answer 4

它的存在，使页面加载速度更快...）：

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

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

Answer 5

好吧，我有一个非常普遍的解决方案，你是瘦和脚本的意思是：对

您可以添加一个id到每一个在不改变jQuery的，如果他们是不同的大小和这样的。

只要您更改所选择的类，就可以与任何元素一起使用。

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

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

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

Another variation I used on one of my portfolios.