Question

我正在尝试使用带有jquery的社交按钮来切换一个类，但是当我将它添加到我的网站时它不起作用，但在JsFiddle工作得很好。

继承人 JsFiddle ，这是我的 website ，所以你可以检查那里没有。它在视频下面。

我不知道我做错了什么，我已将此添加到我的头文件中：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$( "#clickme" ).click(function() {
  $( "#share-stuff" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});

</script>

这就是我希望课程出现的地方：

<div id="clickme">
    Partilhar
</div>
<div id="share-stuff"> <!-- social share buttons -->
    <ul class="crafty-social-buttons-list">
        <li><a class="crafty-social-button csb-facebook" href="http://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>" target="_blank"><img title="Facebook" alt="Facebook" width="38" height="38" src="../tv/wp-content/themes/trademark/share-buttons/facebook.png"></a></li>
        <li><a class="crafty-social-button csb-google" href="https://plus.google.com/share?url=<?php the_permalink() ?>" target="_blank"><img title="Google" alt="Google" width="38" height="38" src="../tv/wp-content/themes/trademark/share-buttons/google.png"></a></li>
        <li><a class="crafty-social-button csb-twitter" href="http://twitter.com/share?url=<?php the_permalink() ?>" target="_blank"><img title="Twitter" alt="Twitter" width="38" height="38" src="../tv/wp-content/themes/trademark/share-buttons/twitter.png"></a></li>
        <li><a class="crafty-social-button csb-reddit" href="http://reddit.com/submit?url=<?php the_permalink() ?>" target="_blank"><img title="Reddit" alt="Reddit" width="38" height="38" src="../tv/wp-content/themes/trademark/share-buttons/reddit.png"></a></li>
    </ul>
</div>

另外如何让它开始关闭而不是打开？

Answer 1

尝试使用$(document).ready。

要关闭share-stuff onload，请先隐藏它：

http://jsfiddle.net/dirtyd77/omeedr9z/

// $(document).ready equivalent
$(function(){
    // collapse share-stuff onload by using .hide() 
    $( "#share-stuff" ).hide();

    $( "#clickme" ).click(function() {
      $( "#share-stuff" ).slideToggle( "slow", function() {
        // Animation complete.
      });
    });
});

Answer 2

您正在尝试绑定clickme项目，然后在dom上呈现它。将您的jquery代码移动到文档的末尾。最好用文档就绪代码包装它们，如...

$(document).ready(function() {

// your jquery codes

});

Answer 3

$(document).ready(function() {

// your jquery codes

});

你必须以上述方式包装jquery，并且似乎页面上有错误，请检查两者。

Jquery切换不在实时网站中工作

3 个答案: