Question

我为我的主页制作了一个小按钮显示隐藏代码。如果我将该代码放在内部页面中它可以正常工作，但如果我把它放在主页上它就不起作用。如果我将Jquery CDN放入标题中，那么我的旋转滑块就会停止工作。

在我的主页部分，您可以看到代码：

http://www.mythstreet.com/#our-services

这是我的小提琴，工作得很好：

http://jsfiddle.net/junaidkhawaja/ha6qp7w4/6/

以下是我的代码片段：的 HTML

    <div id="1">
    My Content 1
</div>

<div id="2" style="display:none;">
    My Dynamic Content
</div>

<div id="static" style="display:none;">
    My Static Content
</div>
<button id="btnClick">Click me!</button>
<hr />
<div id="3">
    My Content 1
</div>

<div id="4" style="display:none">
    My Dynamic Content
</div>

<div id="static2" style="display:none;">
    My Static Content
</div>
<button id="btnClick2">Click me!</button>

使用Javascript：

$( document ).ready(function() {
   $('#btnClick').on('click',function(){
    if($('#1').css('display')!='none'){
    $('#2').html($('#static').html()).show().siblings('#1').hide();
    }else if($('#2').css('display')!='none'){
        $('#1').show().siblings('#2').hide();
    }
});
    $('#btnClick2').on('click',function(){
    if($('#3').css('display')!='none'){
    $('#4').html($('#static2').html()).show().siblings('#3').hide();
    }else if($('#4').css('display')!='none'){
        $('#3').show().siblings('#4').hide();
    }
});
    });

更新：我发现在使用此代码后，我的滑块也无效。

Answer 1

只需查看您的网站并在控制台中玩游戏，我就可以看到$未定义。

快速解决此问题的方法是将代码更改为使用jQuery()代替$(...)

注意：目前无法进一步调试，因为您已修复了现场网站上的代码（万岁！）

Answer 2

查看代码，在第一行您会错过$

这一个：

$( document ).ready(function()

应该是：

jQuery( document ).ready(function($)

Jquery显示/隐藏按钮不在主页上工作

2 个答案: