Question

当屏幕尺寸达到手机屏幕尺寸时，我正试图让click function处理我的汉堡包图标。当屏幕尺寸大于800px's时，点击功能会起作用，但如果屏幕尺寸小于它不会触发的话。这似乎与在汉堡包图标上使用position: absolute有关，就好像你删除绝对位置并将其更改为position: relative或将它们全部删除一样按预期工作。我也在使用bootstraps媒体查询。我做错了什么？

演示我的代码，（您需要调整浏览器大小以进行测试）：http://jsfiddle.net/nqLtvmd3/2/

HTML：

<div class="container-fluid">
        <div class="row">
            <div class="nice-blue-bg">
                    <div class="container">

                            <div class="glyphicon glyphicon-menu-hamburger mobile-nav-icon"></div>

                            <div class="row">
                                    <div class="col-xs-12 col-md-4">
                                        <div class="logo">
                                            TESTING                                     
                                        </div>
                                    </div>
                                            <div class="col-xs-12 col-md-8">
                                                <nav>
                                                    <ul>
                                                        <li class="">
                                                            <a href="#">Home</a>
                                                            <a href="#">About Me</a>
                                                            <a href="#">Latest Work</a>
                                                            <a href="#">Contact Me</a>
                                                        </li>
                                                    </ul>
                                                </nav>
                                            </div>
                                <div class="clearfix"></div>
                            </div>

的CSS：

body {
    background: #fff;
    width: 100%;

}

a:hover, a:focus { 
    text-decoration:  none;
    color: yellow;
}
/* Fix firefox issue with images not resizing whilst using bootstrap class */
.img-responsive {
    width: 100%;
}

.nice-blue-bg {


  background: -webkit-linear-gradient(145deg, #134E5E 10%, #71B280 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(145deg, #134E5E 10%, #71B280 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(145deg, #134E5E 10%, #71B280 90%); /* IE10 */
  background:      -o-linear-gradient(145deg, #134E5E 10%, #71B280 90%); /* Opera 11.10+ */
  background:         linear-gradient(145deg, #134E5E 10%, #71B280 90%); /* W3C */

    width: 100%;
    height: 620px;
    position: relative;

}



.logo {
    font-family: Lato;
    color: white;
    font-size: 50px;
    font-weight: 100;
    margin-top: 80px;
}


nav {
    margin-top: 90px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav li, nav a {
    display: inline-block;
    margin-left: 30px;
    float: right;
}

nav a {
    text-decoration: none;
    color: #eaeaea;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;

}

nav a:hover {
    text-decoration: none;
    color: white;
}


/* This is the css for the icon when the screen size is greater than 991px */
.mobile-nav-icon {
    color: white;
    font-size: 50px;  
}

@media (max-width: 991px) { 

/* This is the css for the icon when the screen size is less than 991px */
    .mobile-nav-icon {
        display: block;
        color: white;
        font-size: 50px;
        position: absolute;
        top: 0;
        left: 0;
    }

    .logo {
        text-align: center;
    }

    nav {
        margin-top: 20px;
        display: none;
    }

    nav li {
        float: none;
        text-align: center;
        display: block;
    }

    .welcome {
        text-align: center;
    }

    nav li, nav a {
        margin-left: 0;
        display: block;
        float: none;
    }

    nav a {
        padding: 20px 0 20px 0;
        border-top: 1px solid #c2c2c2;
        margin-left: -15px;
        margin-right: -15px;
    }

    nav a:last-child {
        border-bottom: 1px solid #c2c2c2;
        margin-left: -15px;
        margin-right: -15px;
    }


    .nice-blue-bg {
        width: 100%;
        height: auto;
        padding-bottom: 30px;
    }



}

JS：

$('.mobile-nav-icon').click(function() {
    alert('this is working');
});

Answer 1

您需要增加元素的z-index。否则，当屏幕尺寸较小时，兄弟.row元素将与其重叠。将它增加到1就足够了，因为兄弟元素的默认z-index为auto，或者在这种情况下为0。

Updated Example

.mobile-nav-icon {
    z-index: 1;
}

值得指出的是，您可以避免设置z-index并将中的图标元素放在DOM中的兄弟元素之后。这样做，它将被置于顶部。

Example Here

jQuery点击功能不是在较小的屏幕尺寸下触发，只是更大？

1 个答案: