Question

好的，为了提高我的技能，我决定建立一个“Play Market”响应页面。

我使用滚动效果构建了搜索栏（向下滚动时隐藏 - 向上滚动时显示）。（第一个jQuery部分）。

然后创建按钮 - 当点击3个点的图像时，它会打开一个菜单（这是我的旧帖子：How to create a button to every list item which opens a menu over it?）。 = Seconde jQuery代码部分。

这是我的代码：http://jsfiddle.net/e0byofe2/5/ 你无法查看图像，所以这是我的旧版帖子，带有版画屏幕：How to create a button to every list item which opens a menu over it?会让你更清楚。

第一个jQuery部分没有在我的pc / mmobile浏览器上运行，这与JSfiddle上的代码非常奇怪。我没有收到任何错误消息，所以我不知道问题出在哪里。我有一种感觉，必须是CSS的东西。

有人可以指出问题吗？

这是我的代码的更新： CSS：

@media (max-width: 360px)  {

    body{
        margin: 0;
        height: 100%;
    }

    .main{
        overflow-x: hidden;
        width: 100%;
        height: 100%;
    }

    #header-wrap {
        width: 100%;
        position: fixed;
        background-color: #689f38;
        height: 62px;
    }

    #header {
        width: 100%;
        position: absolute;
        bottom: 0;
        box-shadow: 0px 0px 19px rgb(10, 29, 90);
        -webkit-box-shadow: 0px 0px 19px rgb(10, 29, 90);
        -moz-box-shadow: 0px 0px 19px rgb(10, 29, 90);
    }


    .content{
        padding-top: 80px;
        width: 100%;
        /*height: 100%;*/
        background-color: #eeeeee;
    }

    #apps-header{
        margin-left: 10px;
        font-family: arial;
        background-image: url('triangle.png');
        background-position: bottom;
        width: 86px;
        background-repeat: no-repeat;
        background-size: 10px;
    }

    .line{
        width: 100%;
        height: 2px;
        background-color: #458b09;
        margin-top: 10px;
    }

    .apps{
        width: 100%;
        /*border: 1px solid black;*/
        padding-top: 10px;
        height: 100%;
    }

    .app{
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        box-shadow: 0px 0px 6px rgb(145, 145, 145);
        -webkit-box-shadow: 0px 0px 6px rgb(145, 145, 145);
        -moz-box-shadow: 0px 0px 6px rgb(145, 145, 145);
        background-color: #fafafa;
        padding: 10px 8px;
        margin: 5px 8px;
        display: inline-table; /******/
        position: relative;
        width: 328px;
    }

    .app_icon{
        width: 83px;
        height: 83px;
        float: left;
    }

    .app_info{
        /*border: 1px solid red;*/
        float: left;
        width: 210px;
        height: 81px;
        padding-left: 20px;
    }

    .app_name{
        font-family: arial;
        font-size: 18px;

    }

    .app_comp{
        font-family: arial;
        font-size: 16px;    
        color: #595959;
    }

    .stars img{
        float: left;
        width: 14px; 
        height: 14px;
    }

    .free{
        color: #69a03a;
        font-family: arial;
        position: relative;
        bottom: -25px;
        left: 112px;
        font-size: 14px;
        width: 43px;
        text-align: left;
        float: left;
    }

    .dots{
        height: 25px;
        float: right;   
    }

    .dots_menu{
        display: none;
        width: 202px;
        position: absolute;
        top: 40px;
        right: 1px;
        z-index: 1;
        background: rgb(238, 238, 238);
        -webkit-box-shadow: 0px 4px 15px #000;
        -moz-box-shadow: 0px 4px 15px #000;
        box-shadow: 0px 4px 15px #000;
    }

    .dots_menu.show{
        display: block;
    }

    .dots_menu a {
        display: block;
        text-decoration: none;
        color: #000;
        padding: 10px;
        font-family: arial;
    }

}







@media (min-width :  240px) and (max-width : 320px ) {

    .content {
        padding-top: 70px;
    }

    #header-wrap {
        height: 55px;
    }

    #header-wrap img {
        width: 53px;
    }

    .app{
        padding: 5px 7px;
        width: 291px;
    }

    .app_icon{
        width: 74px;
        height: 74px;
    }

    .app_info{
        width: 180px;
        height: 74px;
        padding-left: 15px;
    }

    .app_name{
        font-size: 16px;
    }

    .app_comp{
        font-size: 14px;    
    }   

    .stars img{
        float: left;
        width: 12px; 
        height: 12px;
    }

    .free{
        font-size: 12px;
        left: 107px;
    }

    .dots{
        height: 22px;
    }

    .dots_menu{
        top: 29px;
    }

}

jQuery：

$(document).ready(function(){


    /************ NAV BAR MENU SLIDE-UP/SLIDE DOWN ************/

    var previousScroll = 0,
        headerOrgOffset = $('#header').height();

    $('#header-wrap').height($('#header').height());

    $(window).scroll(function () {
        var currentScroll = $(this).scrollTop();
        if (currentScroll > headerOrgOffset) {
            if (currentScroll > previousScroll) {
                $('#header-wrap').slideUp();
            } else {
                $('#header-wrap').slideDown();
            }
        } else {
                $('#header-wrap').slideDown();
        }
        previousScroll = currentScroll;
    });

    /***********************************************************/




    /************ APP INSTALL MENU THING ************/

    $('.dots').click(function(e){
        $('.dots_menu').removeClass('show');
        $(this).next().addClass('show');
        $(document).mouseup(function (e)
        {
            var container = $(".dots_menu");

            if ( ! container.is(e.target) && container.has(e.target).length === 0)
            {
                $(".dots_menu").removeClass("show");
            }
        });
    });




    /***********************************************************/

});

Answer 1

我发现了问题。在我的代码我有100％身高的身体。我给它1000px，它又开始工作了。我不知道为什么会这样。如果有人知道我会很高兴听到:)

为什么我添加的第二个jQuery代码部分/新的CSS部分导致第一个jQuery代码无法在我的页面上工作

1 个答案: