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