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

Question

当屏幕尺寸为手机屏幕尺寸时，我正在尝试让点击功能在我的汉堡包图标上工作。当屏幕尺寸大于 800px 时，点击功能起作用，但如果小于该尺寸，则不会触发。这似乎与在汉堡包图标上使用 position: absolute 有关，就好像您删除了 position absolute 并将其更改为 position: relative 或将其全部删除它一起按预期工作。我也在使用 Bootstrap 媒体查询。我做错了什么？

我的代码演示，(您需要调整浏览器大小进行测试):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