Question

我正在使用Isotope和Bootstrap。我可以通过关注网络中的许多示例让他们都工作......但是当我将它们放入选择或弹出菜单或菜单时，过滤器按钮就会停止工作。这是正常还是我错过了什么！？

我猜这条线是错的，但是如何!! - ＆GT; $（'。过滤a'）。点击（function（）

$( function() {
    // init Isotope
    var $container = $('.isotope').isotope({
        itemSelector: '.item',
        filter: '*',
        layoutMode: 'masonry'
    });
    var filters = {};
    // bind filter button click
    $('.filters a').click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ($this.hasClass('active')) {
            return;
        }
        var $optionSet = $this.parents('.option-set');
        // change selected class
        $optionSet.find('.active').removeClass('active');
        $this.addClass('active');
        // store filter value in object
        var group = $optionSet.attr('data-filter-group');
        filters[group] = $this.attr('data-filter-value');
        // convert object into array
        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop]);
        }
        var selector = isoFilters.join('');
        $container.isotope({
            filter: selector
        });
        return false;
    });

    // pop up div content
    $('[rel=popover]').popover({ 
        html : true, 
        trigger : 'click',
        placement : 'auto bottom',
        content: function() {
            return $('#'+this.id+'-content').html();
        }
    });
    // popup auto close
    $('[data-toggle="popover"]').popover();
    $('body').on('click', function (e) {
        $('[data-toggle="popover"]').each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
    });
});

或者它可能是不正确的HTML？我尝试过这么多组合！

<div class="btn-group">
    <div><a href="#" id="isotope-catagories" rel="popover" data-container="body" data-toggle="popover" data-original-title="">Catagories</a></div>
...
</div>

<div id="isotope-catagories-content" style="display: none" class="filters option-set button-group" data-filter-group="catagory">
    <a class="active button btn-default" href="#" data-filter-value="" >show all</a>
    <?php $categories = get_categories('orderby=name'); foreach ($categories as $cat) { ?>
        <a  class="button btn-default" href="#" data-filter-value=".<?php echo $cat->slug; ?>"><?= $cat->cat_name; ?></a>
    <?php } ?>
</div>
...

只要过滤器按钮是按钮或div，这就完全正常...只要我将它们放入弹出窗口（在这种情况下）它看起来很好但是当点击过滤器按钮时没有任何反应。

目标是在自己的弹出窗口或菜单或隐藏的div中为（WP）Catagories，Authors和Tags设置Isotope过滤器。

Answer 1

我有点回答了我自己的问题。我没有使用弹出菜单或菜单，而是按照this answer hyde跟随Hyde's example将过滤按钮放在第二个同位素实例中

我在Fiddle上修改了多个同位素实例的fiddle

查看我的{{3}}

我还在调整它，但基本的想法（可伸缩的过滤器按钮组）正在工作。

<!-- first filter buttons -->
<section id="options" class="clearfix">
    <h3>Filters</h3>
    ...    
</section>
<!-- end first filter buttons -->

<!-- first filter container -->
<div id="container" class="container clearfix">
<--! second filter buttons -->
    <section id="options-new" class="clearfix">
        <h3>Filters</h3>
        ...
    </section>
    <!-- second filter buttons -->
</div>
<--! first filter container -->

<--! second filter container -->
<div id="container-new" class="clearfix">
    ...  
</div>
<--! second filter container -->

我仍然愿意接受改进！：）

引导菜单/弹出窗口中的同位素过滤器按钮

1 个答案: