堆栈内存溢出
  繁体   English   中英

HTML选择选项不适用于手机

[英]Html select option not working for mobile

 原文  2018-10-16 11:13:13  0   1    jquery/ html/ css

问题描述

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

我设法制作了一个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

1 个解决方案

解决方案1
 0  2018-10-16 11:24:16

尝试使用此var $ select = $（'。product-selector'）。on（'click touch'function（）

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript onclick in<option>的<select>不在手机上工作 jquery更改在html选择选项中不起作用 手机选择选项的事件 jQuery select 选项上的点击事件不适用于 jQuery 移动框架 为什么下拉选择选项在某些移动设备中不起作用 jQuery Mobile自动完成选择选项 在Jquery mobile中选择选项中的问题 从 HTML 字符串中选择的 jquery 更改所选选项不起作用 自定义选择选项不适用于 angular，但适用于 html、css 模板 Chrome 浏览器中的 html select 选项标签的点击事件不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM