您现在的位置是：首页 > 网站制作 > WordpressWordpress

WordPress实现点击展开折叠二级菜单+当前点击后变色

杰帅2023-07-20【Wordpress】人已围观

简介一个客户需要开发这样的网站，左侧菜单是一个点击展开式菜单，默认是收缩的，点击后会展开子菜单。当用户点击某个子菜单时，当前点击的菜单会变成红色。效果如下图：

一个客户需要开发这样的网站，左侧菜单是一个点击展开式菜单，默认是收缩的，点击后会展开子菜单。当用户点击某个子菜单时，当前点击的菜单会变成红色。效果如下图：

功能要求：

一级菜单下面有多个子菜单；
PC端点击目录的文章后目录树会自动关闭；
PC端点击目录中的文章，设置一个颜色，用来区分当前正在阅读的文章；

以下是通过WORDPRESS程序来实现这样的功能，如果你在做网站时，也需要这样的功能的话，可以使用以下的代码。

PHP代码

<div class="sidebarleft">
    <ul class="cd-accordion-menu animated">
    <li class="children">
            <input type="checkbox" name ="group-1" id="group-1" checked>
            <label for="group-1">   pyton教程</label>

            <ul>
           
            <?php
            $catidall=Array("31","32","33","34","35"); 
           
            for ($i=0;$i<count($catidall);$i++) {?>
               <li class="cat-item cat-item-<?php echo $catidall[$i];?>">
               <input type="checkbox" name ="sub-group-level-<?php echo $catidall[$i];?>" id="sub-group-level-<?php echo $catidall[$i];?>">
               <label for="sub-group-level-<?php echo $catidall[$i];?>"><?php echo get_cat_name($catidall[$i])?></label>   
                    <?php $singleurl = get_permalink($post_id);?>
                   <?php foreach((get_the_category()) as $category);?>
                 <ul class="children"<?php if(is_single()&&$category->cat_ID==$catidall[$i]){?> style="display:block;"<?php }?>>
                    <?php query_posts('cat='.$catidall[$i].'' . $mcatID. '&caller_get_posts=1&showposts=100&order=ASC'); ?>
                    <?php while (have_posts()) : the_post(); ?>
                     <li><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"<?php if(get_permalink($post_id)==$singleurl){?> style="color:red"<?php }?>><?php the_title(); ?></a></li>

                    <?php endwhile; wp_reset_query(); ?>
                   
                </ul>
            </li>
            <?php } ?>                        
            </ul>
        </li>
        </ul>
</div>

<script src="<?php bloginfo('template_directory'); ?>/jquerysfq/js/jquery-2.1.1.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/jquerysfq/js/main.js"></script>

JS文件（main.js）

jQuery(document).ready(function(){
    var accordionsMenu = $('.cd-accordion-menu');

    if( accordionsMenu.length > 0 ) {
       
        accordionsMenu.each(function(){
            var accordion = $(this);
            //detect change in the input[type="checkbox"] value
            accordion.on('change', 'input[type="checkbox"]', function(){
                var checkbox = $(this);
                console.log(checkbox.prop('checked'));
                ( checkbox.prop('checked') ) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300) : checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
            });
        });
    }
});

CSS代码

/* --------------------------------

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}
ul,ol{list-style:none;}


/* --------------------------------

Main Components

-------------------------------- */
label { font-weight: 400;}
.sidebarleft .children li{    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
.sidebarleft{padding-right:5px;overflow: hidden;font-size:14px;}
ul,ol{padding:0;}
.cat-item-none{display:none;}
.cd-accordion-menu {
  width: 100%;
    padding:0;
  margin: 2em auto;
}
.cd-accordion-menu ul {
  /* by default hide all sub menus */
  display: none;
}
.cd-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cd-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
  position: relative;
  display: block;
  background: #FAFAFA;
  color: #000000;
  font-size: 1em;
}
.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {
  background: #52565d;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu label {
  cursor: pointer;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after {
  background-image: url(../img/cd-icons.svg);
  background-repeat: no-repeat;
}
.cd-accordion-menu label::before {
  /* arrow icon */
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.cd-accordion-menu label::after {
  /* folder icons */
  left: 41px;
  background-position: -16px 0;
}

.cd-accordion-menu input[type=checkbox]:checked + label::before {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu input[type=checkbox]:checked + label::after {
  /* show open folder icon if item is checked */
  background-position: -32px 0;
}
.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: block;
}
.cd-accordion-menu ul label/*,
.cd-accordion-menu ul a */{
 
  box-shadow: inset 0 -1px #ddd;
  padding-left: 67px;
}
.no-touch .cd-accordion-menu ul label:hover, .no-touch
.cd-accordion-menu ul a:hover {
  background: #3c3f45;
}
.cd-accordion-menu > li:last-of-type > label,
.cd-accordion-menu > li:last-of-type > a,
.cd-accordion-menu > li > ul > li:last-of-type label,
.cd-accordion-menu > li > ul > li:last-of-type a {
  box-shadow: none;
}

.cd-accordion-menu ul label::after,
.cd-accordion-menu ul a::after {
  left: 44px;
}
.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
  padding-left: 50px;
}
.cd-accordion-menu ul ul label::before {
  left: 54px;
}
.cd-accordion-menu ul ul label::after,
.cd-accordion-menu ul ul a::after {
  left: 77px;
}
.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
  padding-left: 118px;
}
.cd-accordion-menu ul ul ul label::before {
  left: 72px;
}
.cd-accordion-menu ul ul ul label::after,
.cd-accordion-menu ul ul ul a::after {
  left: 95px;
}
  .cd-accordion-menu label {
    padding: 10px 10px 10px 45px;
    font-size: 1em;
  }
.cd-accordion-menu a {
    padding: 5px 10px 5px 45px;
    font-size: 1em;
    color:#444;
    background:url(/wp-content/uploads/2019/07/ico1.png) no-repeat 30px 50%;
}
  .cd-accordion-menu label::before {
    left: 5px;
  }
  .cd-accordion-menu label::after {
    left: 26px;
  }
   .cd-accordion-menu ul label::before {
    left: 24px;
  }

  .cd-accordion-menu ul ul label::before {
    left: 72px;
  }
  .cd-accordion-menu ul ul label::after,
  .cd-accordion-menu ul ul a::after {
    left: 101px;
  }
  .cd-accordion-menu ul ul ul label,
  .cd-accordion-menu ul ul ul a {
    padding-left: 154px;
  }
  .cd-accordion-menu ul ul ul label::before {
    left: 96px;
  }
  .cd-accordion-menu ul ul ul label::after,
  .cd-accordion-menu ul ul ul a::after {
    left: 125px;
  }
.cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

Tags：wordpress主题制作 wordpress教程二级菜单

很赞哦！ ()

上一篇：WordPress 3D标签云标签WP-Cumulus

下一篇：WordPress获取当前分类的顶级分类名称和链接