Question

`假设我去了一个类别页面。此类别页面上有一些内容。我想在内容下方或此类别页面下显示此类别的父类别的所有子类别。我还想显示该类别的描述和缩略图。我该怎么做？

然后，如果用户从菜单转到类别页面，该类别将保持活动状态。其余类别将变得模糊、不活跃或类似。

更新：

假设它是一个菜单。现在所有类别项目都已添加到此菜单中。现在，如果有人从这里单击父类别或子类别，将显示该类别的父类别的所有子类别。就像下面的代码。好的。

但是当有人从菜单中点击某个类别时，该类别将被突出显示。其余的类别将变得模糊或类似。但是，如果您将鼠标悬停在鼠标上，这种模糊将不再存在。

如果有人帮忙，我会受益。有什么想法吗？

if( is_product_category() ){

$queried_object = get_queried_object();
$child_terms    = get_term_children ( $queried_object->term_id, 'product_cat' );
$based_term     = (is_wp_error($child_terms) || empty($child_terms)) ? get_term ( $queried_object->parent, 'product_cat' ) : $queried_object;

printf( '<h2 class="shop__sidebar-heading"><a href="%s?so64231449=true">%s</a></h2>', esc_url(get_term_link($based_term->term_id)), $based_term->name );

$display_terms = get_terms( 'product_cat', array(
    'orderby'       => 'name', 
    'order'         => 'ASC',
    'hide_empty'    => false,
    'parent'        => $based_term->term_id,
) );

if( !empty( $display_terms ) && !is_wp_error( $display_terms ) ){

    echo '';
  
        foreach( $display_terms as $display_term ){

            $thumbnail_id = get_term_meta ($display_term->term_id, 'thumbnail_id', true);
            $image        = wp_get_attachment_url( $thumbnail_id );
            
            printf(
                '<div class="col-md-3">
                    <div class="content-inner">
                        <h6%s><a href="%s">%s</a></h6>
                        <img src="%s" alt="" />
                    </div>
                </div>',
                ($display_term->term_id == $queried_object->term_id) ? ' class="active"' : '',
                esc_url(get_term_link($display_term->term_id)),
                $display_term->name,
                $image,
            );
        }

    echo '';
   
}

}

Answer 1

$(document).ready(function(){
    $('.category-box').hover(
       function () {
            $('.category-box').removeClass('active');
            $(this).addClass('active');
        }, function () {
            $(this).removeClass('active');
        }
    );
});

.sub-cat-list {
    width: 100%;
}

.sub-cat-list .content-inner {
  text-align: center;
  overflow: hidden;
}


.sub-cat-list .content-inner img {
  width: auto;
  height:120px;
  border-radius: 10px;
}

.sub-cat-list  .content-inner h6 {
  padding: 10px 0;
 }

 .sub-cat-list .content-inner h6 a {
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 600;
  color: #000;
 }

 .sub-cat-list .content-inner h6 a:hover {
  color: #CC0066; 
 }

// All are testing purpose

 .category-box {
     background: blue;
 }

 .category-box:hover {
     background: red;
 }

 .category-box.active {
  background-color: #e7e7e7
  
}

.category-box.active h6 a {
  color: cayan;
}

.category-box.active:hover > h6 a {
  color: rgb(228, 22, 66);
}
.col-md-3 {
    float: left;
    width: 25%;
}
.col-md-3.category-box {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
.col-md-3.category-box.active {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="sub-cat-list">
        <div class="col-md-3 category-box active">
            <div class="content-inner">
                    <img src="https://via.placeholder.com/150" />
                    <h6><a>This is a cat heading 1</a></h6>
                </div>   
        </div>
        <div class="col-md-3 category-box">
            <div class="content-inner">
                    <img src="https://via.placeholder.com/150" />
                    <h6><a>This is a cat heading 2</a></h6>
                </div>   
        </div>
        <div class="col-md-3 category-box">
            <div class="content-inner">
                    <img src="https://via.placeholder.com/150" />
                    <h6><a>This is a cat heading 3</a></h6>
                </div>   
        </div>
        <div class="col-md-3 category-box">
            <div class="content-inner">
                    <img src="https://via.placeholder.com/150" />
                    <h6><a>This is a cat heading 4</a></h6>
                </div>   
        </div>
    </div>
</div>

使用计数器变量在第一个类别框上添加活动类。

if( is_product_category() ){

    $queried_object = get_queried_object();
    $child_terms    = get_term_children ( $queried_object->term_id, 'product_cat' );
    $based_term     = (is_wp_error($child_terms) || empty($child_terms)) ? get_term ( $queried_object->parent, 'product_cat' ) : $queried_object;

    printf( '<h2 class="shop__sidebar-heading"><a href="%s?so64231449=true">%s</a></h2>', esc_url(get_term_link($based_term->term_id)), $based_term->name );

    $display_terms = get_terms( 'product_cat', array(
        'orderby'       => 'name', 
        'order'         => 'ASC',
        'hide_empty'    => false,
        'parent'        => $based_term->term_id,
    ) );

    if( !empty( $display_terms ) && !is_wp_error( $display_terms ) ){

        echo '';
            $i = 0;
            foreach( $display_terms as $display_term ){

                $thumbnail_id = get_term_meta ($display_term->term_id, 'thumbnail_id', true);
                $image        = wp_get_attachment_url( $thumbnail_id );
                
                $class = ( $i == 0 ) ? 'active' : '' ;

                printf(
                    '<div class="col-md-3 category-box '.$class.' ">
                        <div class="content-inner">
                            <h6%s><a href="%s">%s</a></h6>
                            <img src="%s" alt="" />
                        </div>
                    </div>',
                    ($display_term->term_id == $queried_object->term_id) ? ' class="active"' : '',
                    esc_url(get_term_link($display_term->term_id)),
                    $display_term->name,
                    $image,
                );
                $i++;
            }

        echo '';
       
    }
}

在 category-box 上添加名为“active”并基于 do CSS 的悬停类。

function add_custom_js(){
    ?>
    <script type="text/javascript">
        (function($){
            $(document).ready(function(){
                $('.category-box').hover(
                   function () {
                        $('.category-box').removeClass('active');
                        $(this).addClass('active');
                   }, function () {
                        $(this).removeClass('active');
                   }
                );
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'add_custom_js', 10, 1 );

Answer 2

           $(document).ready(function(){
            $('.category-box')(
               function () {
                    $('.category-box').removeClass('active');
                    $(this).addClass('active');
               }, function () {
                    $(this).removeClass('active');
               }
            );
        });
    })(jQuery);

.sub-cat-list {
    width: 100%;
}

.sub-cat-list .content-inner {
  text-align: center;
  overflow: hidden;
}


.sub-cat-list .content-inner img {
  width: 220px;
  height:120px;
  border-radius: 10px;
}

.sub-cat-list  .content-inner h6 {
  padding: 10px 0;
 }

 .sub-cat-list .content-inner h6 a {
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 600;
  color: #000;
 }

 .sub-cat-list .content-inner h6 a:hover {
  color: #CC0066; 
 }

// All are testing purpose

 .category-box {
     background: blue;
 }

 .category-box:hover {
     background: red;
 }

 .category-box.active {
  background-color: #e7e7e7
  
}

.category-box.active h6 a {
  color: cayan;
}

.category-box.active:hover > h6 a {
  color: rgb(228, 22, 66);
}

<div class="container">
    <div class="sub-cat-list">
        <div class="col-md-3">
            <div class="content-inner">
                    <img src="" />
                    <h6><a>This is a cat heading 1</a></h6>
                </div>   
        </div>
        <div class="col-md-3">
            <div class="content-inner">
                    <img src="" />
                    <h6><a>This is a cat heading 2</a></h6>
                </div>   
        </div>
        <div class="col-md-3">
            <div class="content-inner">
                    <img src="" />
                    <h6><a>This is a cat heading 3</a></h6>
                </div>   
        </div>
        <div class="col-md-3">
            <div class="content-inner">
                    <img src="" />
                    <h6><a>This is a cat heading 4</a></h6>
                </div>   
        </div>
    </div>
</div>

WordPress 类别、子类别、活动类别问题

2 个答案: