HTML <select> jQuery混淆它不起作用的iOS

Question

你好，我正在使用jquery混合插件来制作网络的投资组合部分。一切都还好。但是我只为移动设备构建了一个选择选项菜单（使用引导类hidden-xs和visible-xs）。在正常的浏览器中工作正常，但在iPhone中不起作用。我可以选择选项，但没有任何反应。混合效果不像其他浏览器那样出现。

这是我的网页

<select class="visible-xs form-control " id="filters">
<option class="filter active"  data-filter="cat1 cat2 cat3 cat4 cat5"><span >All</span></option>
<option class="filter" data-filter="cat1"><span >Cat1</span></option>
<option class="filter" data-filter="cat2"><span>Cat2</span></option>
<option class="filter" data-filter="cat3"><span >Cat3</span></option>
<option class="filter" data-filter="cat4"><span>Cat4</span></option>
<option class="filter" data-filter="cat5"><span>Cat5</span></option>
</select>
<ul id="filters" class="hidden-xs clearfix">
<li><span class="filter active" data-filter="cat1 cat2 cat3 cat4 cat5">All</span></li>
<li><span class="filter" data-filter="cat1">Innovación</span></li>
<li><span class="filter" data-filter="cat2">Investigación</span></li>
<li><span class="filter" data-filter="cat3">Artículos</span></li>
<li><span class="filter" data-filter="cat4">Libros</span></li>
<li><span class="filter" data-filter="cat5">Web</span></li>
</ul>
<div id="portfoliolist">
....the code of each item....

这是我的 Java 代码：

$(function () {
        var filterList = {
            init: function () {
                // MixItUp plugin
                // http://mixitup.io
                $('#portfoliolist').mixitup({
                    targetSelector: '.portfolio',
                    filterSelector: '.filter',
                    effects: ['fade'],
                    easing: 'smooth',
                    // call the hover effect
                    onMixEnd: filterList.hoverEffect()
                });             
            },
            hoverEffect: function () {
                // Simple parallax effect
                $('#portfoliolist .portfolio').hover(
                    function () {
                        $(this).find('.label-content').stop().animate({bottom: 0}, 200, 'easeOutQuad');
                        $(this).find('img').stop().animate({top: -100}, 500, 'easeOutQuad');                
                    },
                    function () {
                        $(this).find('.label-content').stop().animate({bottom: -100}, 200, 'easeInQuad');
                        $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');                               
                    }       
                );              
            }
        };
        // Run the show!
        filterList.init();

    }); 

有人知道可能出了什么问题吗？提前致谢

Answer 1

我不

熟悉 MixItUp，但在查看了一分钟的文档后，他们在这里解释了过滤器的工作原理：http://mixitup.io/#FilterSelector

它看起来像是在添加一个点击事件，并且由于您使用的是选择字段，因此它不会触发点击事件。 不过，您可以根据选择框的值更改手动调用筛选器选项。

做出这样的选择：

<select class="visible-xs form-control " id="filters">
    <option value="cat1 cat2 cat3 cat4 cat5">All</option>
    <option value="cat1">Cat1</option>
    <option value="cat2">Cat2</option>
    <option value="cat3">Cat3</option>
    <option value="cat4">Cat4</option>
    <option value="cat5">Cat5</option>
</select>

并在值更改时调用 filter 方法：

$('#filters').on('change', function() { 
   $('#portfoliolist').mixitup('filter',this.value);
});

这是一个JS小提琴，它提醒选择，过滤器代码被注释掉。 http://jsfiddle.net/Xk7Bp/

更新：此外，您有多个项目具有相同的id="filters"这是无效的，可能会导致问题。