Question

好的，所以我现在正努力做一整天，没有找到正确的解决方案。

我正在使用Wordpress（woocommerce）和Divi主题。

我有什么：

当用户点击产品时，会显示说明，但其他产品会低于上一个产品的描述（参见图片）

我想要的是什么：

我必须在一行上显示的产品列表（ul li）（按产品划分3个产品，没关系）。

当用户点击产品时，产品的描述会显示在产品下方（全宽），而不会更改其他产品的位置。

在响应中，说明必须显示在相关产品下方，而不是在最后一个产品

下

我不知道如何在Wordpress（woocommerce）中添加代码。我需要一个产品描述可用的地方。

HTML是由BO添加的，它只是一个产品列表：

<ul class="products">
    <li class="product">
        <span class="et_shop_image">
            <img src="#">
            <h3>Product name</h3>
        </span>
    </li>

    <div class="description">
        <h3>Product name</h3>
        <p class="text-description">This is a description</p>
    </div>

    <li class="product">
        <span class="et_shop_image">
            <img src="#">
            <h3>Product name 1</h3>
        </span>
    </li>

    <div class="description">
        <h3>Product name</h3>
        <p class="text-description">This is a description</p>
    </div>
</ul>

在div之后的description中添加了content-product.php </li>类。{/ p>

JS：

$('li.product').click(function () {
    var currentContent = $(this).siblings('.description');
    $('.description').not(currentContent).slideUp();
    currentContent.slideToggle().siblings('.description');
});

CSS（没什么非常紧张的）：

ul.products {
  margin-top: 5% !important;
}

li.product {
  border: solid 3px rgb(127, 199, 41);
  border-radius: 20px 0 20px 0;
  padding: 9px !important;
  text-align: center;
  min-height: 280px;
}

.active-product {
  &:after {
    content: '';
    width: 25px;
    height: 25px;
    background: $gris-clair;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    bottom: -58px;
    transform: rotate(45deg);
  }
}

.description{
  float: left;
  color: $bleu;
  background: $gris-clair;
  padding: 20px;
  border-radius: 20px 0 20px 0;
  display: none;

  .titre-description{
    color: $bleu;
    margin-bottom: 10px;
  }
}

这是在点击之前（请注意，它错过了持续产品之间的空间）

然后点击：

Answer 1

也许尝试这样的事情......

ul.products {
    margin-top: 5% !important;

    position: relative;
}

.description{
    color: $bleu;
    background: $gris-clair;
    padding: 20px;
    border-radius: 20px 0 20px 0;
    display: none;

    position: absolute;
    width: 100%;
    left: 0;
}

列表中的水平/垂直对齐

1 个答案: