jquery - Html 选择选项不适用于移动设备

问题描述

我创建了一个页面，如果您在桌面上，左侧有一个侧面菜单，右侧有图像，如果您在移动设备上，则侧面菜单消失，顶部显示一个选择选项。我的页面所做的是，如果您单击菜单项，它会根据您单击的类别对右侧的图像进行排序，我遇到的问题是对于移动设备，选择菜单没有这样做。如果我只是调整浏览器的大小以获取选择菜单，它可以工作，但如果我尝试在移动设备上使用它，它就不起作用，而且我没有看到任何错误指向正确的方向。我不确定我哪里出错了。

我设法制作了一个显示正在发生的事情的 jsfiddle：JSFIDDLE

这是我的代码。

这是我的 products.html

<body>
    <div class="container-fluid">
        <div class="body-content">
            <div class="row">
                <div class="col-lg-12 product_category">
                    <h1>
                        Products
                    </h1>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group mobile-category-selector">
                        <select id="category-selector" class="form-control">
                            <option id="all" class="product-selector">All</option>
                            <option class="product-selector" id="kitten">Kitten</option>
                            <option class="product-selector" id="puppy">Puppy</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-2 col-lg-3 ml-15">
                    <div class="category-menu">
                        <ul class="nav flex-column list-group">
                            <li class="category-item">
                                <a class="product-selector list-group-item active-product" href="javascript:void(0);" id="all">All</a>
                            </li>

                            <li class="category-item">
                                <a class="product-selector list-group-item" href="javascript:void(0);" id="kitten">
                                    Kitten
                                </a>
                            </li>

                            <li class="category-item">
                                <a class="product-selector list-group-item" href="javascript:void(0);" id="puppy">
                                    Puppy
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col-xl-9 col-lg-8 col-md-12 product-list">
                    <div id="parent">
                        <div class="row grid-container">
                            <div class="product_items col-xl-2 col-lg-4 col-md-4 col-sm-4 kitten">
                                <a href="#">
                                    <div>
                                        <img src="https://i.imgur.com/QjGYAbbb.jpg" title="source: imgur.com" />

                                        <p>
                                            Kitten 1
                                        </p>
                                    </div>
                                </a>
                            </div>

                            <div class="product_items col-xl-2 col-lg-4 col-md-4 col-sm-4 kitten">
                                <a href="#">
                                    <div>
                                        <img src="https://i.imgur.com/LKCEwxob.jpg" title="source: imgur.com" />

                                        <p>
                                            Kitten 2
                                        </p>
                                    </div>
                                </a>
                            </div>

                            <div class="product_items col-xl-2 col-lg-4 col-md-4 col-sm-4 puppy">
                                <a href="#">
                                    <div>
                                        <img src="https://i.imgur.com/Vvpmx9Y.jpg" title="source: imgur.com" />

                                        <p>
                                            Puppy 1
                                        </p>
                                    </div>
                                </a>
                            </div>

                            <div class="product_items col-xl-2 col-lg-4 col-md-4 col-sm-4 puppy">
                                <a href="#">
                                    <div>
                                        <img src="https://i.imgur.com/9LnDyY5.jpg" title="source: imgur.com" />

                                        <p>
                                            Puppy 2
                                        </p>
                                    </div>
                                </a>
                            </div>

                            <div class="product_items col-xl-2 col-lg-4 col-md-4 col-sm-4 kitten">
                                <a href="#">
                                    <div>
                                        <img src="https://i.imgur.com/zJMe7Yfb.jpg" title="source: imgur.com" />

                                        <p>
                                            Kitten 5
                                        </p>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

这是我的CSS

body{
    background-color: #c5cbd1;
}

.ml-15{
    margin-left: 15px;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 20px;
    min-height: 100%;
    position: relative;
}

.body-content{
    padding-bottom: 234px;
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.mobile-category-selector{
    display: none;
}

.category-menu {
    display: block;
}

.category-menu ul li a {
    font-size: 11px;
    color: #000000;
    padding: 10px 0;
}

.category-item{
    width: 100%;
}

.list-group-item {
    padding: 8px 8px;
    line-height: 5px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0 !important;
}

.active-product {
    background: #D3D3D3 !important;
}

.product-list{
    margin: 0 auto;
}

.product_items a {
    color: #333;
    text-decoration: none;
}

.product_items img {
    width: 100%;
    box-shadow: -5px -5px 25px black;
}

.product_items > p {
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

.product_items div {
    background: #8b9dc3 none repeat scroll 0 0;
}

.product_items div:hover {
    background: #868282 none repeat scroll 0 0;
}

.product_items p {
    font-size: 11px;
    font-weight: bold;
    padding: 5px 7px;
    text-align: center;
    text-transform: uppercase;
}

@media(max-width: 992px){
  .mobile-category-selector{
    display: block;
    z-index: 1000;
  }

  .category-menu{
    display: none;
  }
}

这是我的 js

$(document).ready(function(){

    var $select = $('.product-selector').click(function() {
      if (this.id == 'all') {
        $('#parent > .grid-container > div').fadeIn(450);
      } else {
        var $el = $('.' + this.id).fadeIn(450);
        $('#parent > .grid-container > div').not($el).hide();
      }

      $select.removeClass('active-product');
      $(this).addClass('active-product');
    })
});

更新：所以当我试图找出问题时，我注意到了这一点。我不确定这是否意味着什么

[违规] 向阻止滚动的“鼠标滚轮”事件添加了非被动事件侦听器。考虑将事件处理程序标记为“被动”以使页面更具响应性。见https://www.chromestatus.com/feature/5745543795965952

标签： jqueryhtmlcss

jquery - Html 选择选项不适用于移动设备

问题描述

解决方案

推荐阅读