在WordPress上添加幻灯片切换

时间:2014-10-29 作者:Chun

我正在尝试创建一个滑动切换,以显示和隐藏我正在创建的框,但我没有成功,Wordpress是否有任何需要的特殊功能来使其工作?下面是我的代码和Jfiddle:http://jsfiddle.net/e7fotyqz/

jQuery

$(\'#toggle-onoff-network\').on({
\'click\': function () {
    var origsrc = $(this).attr(\'src\');
    var src = \'\';
    if (origsrc == \'img1_on.png\') src = \'img2_on.png\';
    if (origsrc == \'img2_on.png\') src = \'img1_on.png\';
    $(this).attr(\'src\', src);
}
});

// The script
$( "#netywork-toggle" ).click(function() {
  $( "#share-stuff" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});
Html

<script src="//code.jquery.com/jquery-1.10.2.js"></script> <!--This is on my theme\'s header-->

<div id="netywork-toggle"> <!--This is where I want it to appear-->
    <img id ="toggle-onoff-network" src="img1_on.png" width="auto" height="34"/>
</div>
<div id="share-stuff">
    <ul class="crafty-social-buttons-list">
        <li><a href="#" target="_blank"><img title="Pulseframe Code" alt="Facebook" width="38" height="38" src="facebook.png"></a></li>
        <li><a href="#" target="_blank"><img title="Pulseframe Geek" alt="twitter" width="38" height="38" src="facebook.png"></a></li>
        <li><a href="#" target="_blank"><img title="Comming Soon" alt="Comming Soon" width="38" height="38" src="facebook.png"></a></li>
    </ul>
</div>

1 个回复
最合适的回答,由SO网友:Subharanjan 整理而成

WordPress有默认的jQuery。因此,无需显式加载此文件。

JS代码:

jQuery(\'#toggle-onoff-network\').on({
\'click\': function () {
    var origsrc = jQuery(this).attr(\'src\');
    var src = \'\';
    if (origsrc == \'img1_on.png\') src = \'img2_on.png\';
    if (origsrc == \'img2_on.png\') src = \'img1_on.png\';
    jQuery(this).attr(\'src\', src);
}
});

// The script
jQuery( "#netywork-toggle" ).click(function() {
  jQuery( "#share-stuff" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});
HTML代码:(删除了jQuery文件加载)

<div id="netywork-toggle"> <!--This is where I want it to appear-->
    <img id ="toggle-onoff-network" src="img1_on.png" width="auto" height="34"/>
</div>
<div id="share-stuff">
    <ul class="crafty-social-buttons-list">
        <li><a href="#" target="_blank"><img title="Pulseframe Code" alt="Facebook" width="38" height="38" src="facebook.png"></a></li>
        <li><a href="#" target="_blank"><img title="Pulseframe Geek" alt="twitter" width="38" height="38" src="facebook.png"></a></li>
        <li><a href="#" target="_blank"><img title="Comming Soon" alt="Comming Soon" width="38" height="38" src="facebook.png"></a></li>
    </ul>
</div>

结束

相关推荐

如何使WordPress URL与静态html URL匹配

我有一个网站目前正在WordPress中运行,在该网站是静态html之前,我在WordPress中转换了它。现在的问题是我不想失去链接,谷歌排名等等。我想为页面(在WP中)创建相同的链接(就像在我的旧站点HTML站点上一样),但WordPress会生成自己的slug。甚至我也尝试使用permalink插件,但没有任何好处。例如,旧事件页面链接:http://example.com/events/events.htmWP新事件页面链接:http://example.com/events/我希望链接与旧网站上