Question

是否可以有两个过滤器容器和一个控制器？

现在它只是过滤第一个容器，不能做很多事情，因为我的布局是一个循环中的砖石网格，因此我需要标题和单独的容器...

Here's我正在尝试做的事情。

<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li uk-filter-control><a href="#">All</a></li>
        <li uk-filter-control="[data-tags*='city']"><a href="#">City</a></li>
        <li uk-filter-control="[data-tags*='coast']"><a href="#">Coast</a></li>
    </ul>

    <ul class="js-filter uk-text-center" uk-grid>
        <div class="uk-width-1-1" data-tags="city coast"><h2>header</h2></div>

        <li class="uk-width-1-3" data-tags="city">
            <div class="uk-card uk-card-secondary uk-card-body">City</div>
        </li>
        <li class="uk-width-1-3" data-tags="coast">
            <div class="uk-card uk-card-primary uk-card-body">Coast</div>
        </li>
        <li class="uk-width-1-3" data-tags="city">
            <div class="uk-card uk-card-secondary uk-card-body">City</div>
        </li>
    </ul>
    <ul class="js-filter uk-text-center" uk-grid>
        <div class="uk-width-1-1" data-tags="city coast"><h2>header 2</h2></div>

        <li class="uk-width-1-3" data-tags="city">
            <div class="uk-card uk-card-secondary uk-card-body">City</div>
        </li>
        <li class="uk-width-1-3" data-tags="coast">
            <div class="uk-card uk-card-primary uk-card-body">Coast</div>
        </li>
        <li class="uk-width-1-3" data-tags="city">
            <div class="uk-card uk-card-secondary uk-card-body">City</div>
        </li>
    </ul>

</div>

Answer 1

如果您还没有弄清楚，并且我理解正确，那么您要做的就是使用一个ul标签而不是两个。

<div uk-filter="target: .js-filter">

<ul class="uk-subnav uk-subnav-pill">
    <li uk-filter-control><a href="#">All</a></li>
    <li uk-filter-control="[data-tags*='city']"><a href="#">City</a></li>
    <li uk-filter-control="[data-tags*='coast']"><a href="#">Coast</a></li>
</ul>

<ul class="js-filter uk-text-center" uk-grid>
    <div class="uk-width-1-1" data-tags="city coast"><h2>header</h2></div>

    <li class="uk-width-1-3" data-tags="city">
        <div class="uk-card uk-card-secondary uk-card-body">City</div>
    </li>
    <li class="uk-width-1-3" data-tags="coast">
        <div class="uk-card uk-card-primary uk-card-body">Coast</div>
    </li>
    <li class="uk-width-1-3" data-tags="city">
        <div class="uk-card uk-card-secondary uk-card-body">City</div>
    </li>
    <div class="uk-width-1-1" data-tags="city coast"><h2>header 2</h2></div>

    <li class="uk-width-1-3" data-tags="city">
        <div class="uk-card uk-card-secondary uk-card-body">City</div>
    </li>
    <li class="uk-width-1-3" data-tags="coast">
        <div class="uk-card uk-card-primary uk-card-body">Coast</div>
    </li>
    <li class="uk-width-1-3" data-tags="city">
        <div class="uk-card uk-card-secondary uk-card-body">City</div>
    </li>
</ul>

</div>

Answer 2

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.20/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.20/js/uikit.min.js"></script>
<div class="uk-container">
<div uk-filter="target: .js-filter">

    <ul class="uk-subnav uk-subnav-pill">
        <li uk-filter-control><a href="#">All</a></li>
        <li uk-filter-control="[data-tags*='city']"><a href="#">City</a></li>
        <li uk-filter-control="[data-tags*='coast']"><a href="#">Coast</a></li>
    </ul>
<div class="uk-width-1-1 uk-text-center"><h2>Header 1</h2></div>
    <ul class="js-filter uk-text-center" uk-grid>
        <li class="uk-width-1-3" data-tags="city">
            <div class="uk-card uk-card-secondary uk-card-body">City</div>
        </li>
        <li class="uk-width-1-3" data-tags="coast">
            <div class="uk-card uk-card-primary uk-card-body">Coast</div>
        </li>
        <li class="uk-width-1-3" data-tags="city">
            <div class="uk-card uk-card-secondary uk-card-body">City</div>
        </li>
  </ul>
  <div class="uk-width-1-1 uk-text-center" ><h2>Header 2</h2></div>
  <ul class="js-filter uk-text-center" uk-grid>
        <li class="uk-width-1-3" data-tags="city">
            <div class="uk-card uk-card-secondary uk-card-body">City</div>
        </li>
        <li class="uk-width-1-3" data-tags="coast">
            <div class="uk-card uk-card-primary uk-card-body">Coast</div>
        </li>
        <li class="uk-width-1-3" data-tags="city">
            <div class="uk-card uk-card-secondary uk-card-body">City</div>
        </li>
    </ul>
</div>
</div>

标题不应在过滤器容器中，以免影响它们。

获取具有多个容器的UI Kit筛选器

2 个答案: