小编JMK*_*ley的帖子

我目前正在尝试使用CSS实现以下效果,遗憾的是我的努力未能尝试修改代码以使其更加温和.

任何帮助将不胜感激.

我希望隐藏内容,如果某个产品的元字段为空,但现在它将为所有页面返回它,这意味着我的if语句在某处被破坏了.

产品页面

{% if product.metafields.review %}
  {% include 'extra-review' %}
{% else %}
{% endif %}

查看代码段页面(extra-review.liquid)

{% assign review = product.metafields.review %}
{% assign key = 'author' %}
{% assign key = 'author-img' %}
{% assign key = 'long' %}

<p> Hello world </p>

任何帮助都会很棒

编辑

添加了审核元字段布局

目前正在使用Algolia通过其instantSearch.js提供的无限搜索方法.

发生以下情况:

1. 搜索项目
2. 优化列表
3. 加载更多页面到第5页
4. 滚动回到顶部并更改细化
5. 什么都没发生

从它的外观来看 - 它将新细化的结果附加到已经存在的结果中.我想让它反感结果,不确定这是否是即时搜索本身的错误？

   search.addWidget(
      instantsearch.widgets.numericRefinementList({
        container: '#price',
        attributeName: 'salePrice',
        options: [
          {name: 'All'},
          {end: 20, name: 'less than 20'},
          {end: 50, name: 'less than 50'},
          {start: 50, end: 100, name: 'between 50 and 100'},
          {start: 100, end: 300, name: 'Expensive'},
          {start: 300, name: 'Very Expensive'}
        ],
        templates: {
          header: 'Price'
        }
      })
    );

而无限的搜索代码:

search.addWidget(
  instantsearch.widgets.infiniteHits({
    container: '#infinite-hits-container',
    templates: {
      empty: 'No results',
      item: hitTemplate
    },
    hitsPerPage: 3
  })
);

我正在为Bootstrap 4下拉列表设置动画，但是我有点挣扎。我已经运行了当前代码：

.navbar-nav .dropdown-menu
{
  border:0px;
  transform: translate3d(0px, -100%, 0px);
  transition: opacity 300ms ease 0s, transform 300ms ease 0s;
  margin: 5px 0px;
}

.navbar-nav .dropdown-menu.show
{
  transform: translate3d(0px, 0px, 0px) !important;
  opacity:1 !important;
}

和JS：

$('#navDrop').on('show.bs.dropdown', function () {
  $(".overlay").fadeIn(150);
})
$('#navDrop').on('hide.bs.dropdown', function () {
  $(".overlay").fadeOut(150);
})

但是CSS似乎根本没有触发？有人遇到过解决此问题的方法吗？