Question

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

这是我的HTML

<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

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

选择以下内容：

<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"的项目无效，可能会导致问题。

html <select> jquery混合它不工作ios </select>

1 个答案: