Question

所以我有这4个部分，我的html中有3个和1个页脚，jquery在点击时应用了css类，问题是btw的页脚是一个使用jquery的粘性页脚，甚至不识别点击事件。

<div id="principal">

        <section class="rbox" id="left">
            <em>
                <i class="fa fa-users"></i>
            </em>
        </section>

        <section class="rbox" id="top">
            <em>
                <i class="fa fa-book"></i>
            </em>

        </section>

        <section class="rbox" id="right">
            <em>
                <i class="fa fa-inbox"></i>
            </em>
        </section>


  </div>
        <footer class="rbox" id="bottom">
            <em>
                <i class="fa fa-inbox"></i>
            </em>         
        </footer>

这是js：

$(document).on("ready", inicio);
function inicio(){
    var bodyHeight = $("body").height();
    var vwptHeight = $(window).height();

    if(vwptHeight > bodyHeight){
        $("footer#bottom").css("position", "absolute").css("bottom", 0);
    }

    $('.rbox').on("click", despliegue);
    $('footer#bottom').on("click", function(){
        $("footer#bottom").css("background", "red");
    })

};

function despliegue(){
    alert("hola");
    if($(this).hasClass('active')){
        $('.rbox').removeClass('active');
    }
    else{
        $('.rbox').removeClass('active');
        $(this).addClass('active');
    }
};

另一件事是警报甚至没有显示功能完美，但仅限于页脚部分没有。我究竟做错了什么？？谢谢你的帮助...

Answer 1

请尝试以下方式使用您的代码

$(document).ready(function(){
/////^^^^^^^^^^use ready like this way
inicio();
});

function inicio(){
    var bodyHeight = $("body").height();
    var vwptHeight = $(window).height();

    if(vwptHeight > bodyHeight){
        $("footer#bottom").css("position", "absolute").css("bottom", 0);
    }

    $('.rbox').on("click", function(){despliegue});
    $('footer#bottom').on("click", function(){
        $("footer#bottom").css("background", "red");
    });

}

function despliegue(){
    alert("hola");
    if($(this).hasClass('active')){
        $('.rbox').removeClass('active');
    }
    else{
        $('.rbox').removeClass('active');
        $(this).addClass('active');
    }
}

Answer 2

使用$(document).ready(inicio);代替$(document).on('ready',inicio);

Your Demo和working demo

Answer 3

而不是使用标签，您可以使用

<div id="footer">Footer Here.</div>

并对此进行操作

#footer {

身高：330px;位置：相对; }

Jquery不识别一个div中的click事件，而是另一个div

3 个答案: