Question

我正在一个网站上查看我的Minecraft Pocket Edition服务器的统计数据，我遇到了问题。

我有一个ID为id＆＃34; tabs-minigames＆＃34;在这个div中有4个带有图标的框，这些是＆＃34;标签＆＃34;，并且此div当前未显示（在css中显示无）现在，我在网站顶部有一个图像，您应该可以单击以显示div＆＃34; tabs-minigames＆＃34;，并且标签显示，但点击一秒后不会消失时间。我看不出我做错了什么。

我在jQuery中使用此函数来显示和隐藏迷你游戏选项卡：

    $(document).ready(function(){
        var status = false;
        $('#sliderimg').on('click', function(){
            if(!status){
                $("#tabs-minigames").show();
                status = true;
            }else{
                $("#tabs-minigames").hide();
                status = false;
            }
        });
    });

我没有看到该功能有任何问题，这里是HTML

<html>
    <head>
        <title>
            View your stats - Legion PE 
        </title>
        <link rel="stylesheet" type="text/css" href="styles/main.css"></link>
        <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
        var status = false;
        $('#sliderimg').on('click', function(){
            if(!status){
                $("#tabs-minigames").show();
                status = true;
            }else{
                $("#tabs-minigames").hide();
                status = false;
            }
        });
    });
        </script>
    </head>
    <body>
        <div id="tabs">
            <div class="tabs-back">
                <div id="tabs-middle">
                        <img id="sliderimg" src="graphics/slider.png" height="100" width="100" style="position: fixed;padding-left:20px;padding-top: 10px;" style="outline:none;cursor: pointer;"></img>
                    <div style="padding-left:150px;padding-top:25px;">
                        <div id="tab-light-box">
                                Legion PE
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="tabs-minigames" style="display: none;outline: none;">
            <div class="tabs-minigame">
                <img src="icons/kitpvp_fullsize.png" width="120" height="110" style="padding-left:15px;padding-top:20px;"></img>
            </div>
            <div class="tabs-minigame">
                <img src="icons/spleef_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
            </div>
            <div class="tabs-minigame">
                <img src="icons/bowandarrow_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
            </div>
            <div class="tabs-minigame">
                <img src="icons/diamond_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
            </div>
        </div>
        <center>
        <div id="center">
        </div>
        </center>
    </body>
</html>

您可以在此处看到该网站：http://legionpvp.eu/pe/login/stats.html

谢谢！

Answer 1

你没有任何带有id =＆＃34; div＆＃34;的元素，以及你将你的点击绑定到...的所有元素。这是一张图片与另一个id，你的意思是使用

.delegate("#sliderimg", "click", function(){

}

另外正如其他人指出最好使用jquery.on（），或者在你的情况下你甚至可以只使用$('#sliderimg').click()，除非你打算添加/删除带有该id的元素页面。

Answer 2

你可以尝试这个，不需要任何真或假

$('#sliderimg').on('click',function(){
  $('#tabs-minigames').slideToggle();  // you can use fadeToggle() as well
});

Answer 3

在$（document）.ready函数

中声明变量

    $(document).ready(function () {
        var status = false;
        $("#sliderimg").on("click", function () {
            if (status === false) {
                $("#tabs-minigames").show();
                status = true;
            } else {
                $("#tabs-minigames").hide();
                status = false;
            }
        });
    });

无法点击div

3 个答案: