这是一个wordpress商店，我想自动显示类别名称，但由于隐藏了子类别，下面的代码与悬停效果完美配合，现在我希望改为单击效果。$cats变量是使用get\\u terms（）函数的，但是为了在这里工作，我包括了一些类别，这些类别只涉及到；“第三代”；。

<?php $cats = array(array(\'first\', \'sub-first\', \'sub-sub-first\'),
                    array(\'second\', \'sub-second\'),
                    array(\'third\', \'sub-third\', \'sub-sub-third\')); ?>
<h3>Categories</h1>
<ul class="ul1"> <?php
  foreach($cats as $cat):
    if (isset($cat[0])): ?>
      <li class="li1" onclick="test()"><a href="#"><?php echo $cat[0] ?></a> <?php
        if (isset($cat[1])):?>
          <ul class="ul2">
            <li class="li2"><a href="#"><?php echo $cat[1] ?></a> <?php
              if (isset($cat[2])):?>
                <ul class="ul3">
                  <li class="li3"><a href="#"><?php echo $cat[2] ?></a> </li>
                </ul> <?php
              endif; ?>
            </li>
          </ul> <?php
        endif; ?>
      </li> <?php
    endif;
  endforeach; ?>
</ul>

<style media="screen">
  ul{
    list-style: none;
  }
  a{
    text-decoration: none;
    color:#fff;
  }
  a:hover{
    color:#EF7522;
  }
  .li1{
    background:#1B2332;
    width:200px;
    border:1px solid lightgreen;
    padding:10px;
  }
  .ul2, .ul3{
    display:none;
  }
  .li1:hover .ul2{
    display:block;
  }
  .ul2:hover .ul3{
    display:block;
  }
</style>

对于点击效果，我从样式中删除了最后两个悬停效果，并添加了javascript函数test（）；

<script type="text/javascript">
    function test(){
        $(".ul2").css({
            "display":"block"
        });
    } 
</script>

所发生的是，我单击一个类别，所有子类别都显示出来，我想要的与悬停效果相同，如果我单击第一个类别，我只有该类别的子类别，依此类推。

如果有人能帮助我，我已经为此绞尽脑汁好几天了！

<?php $cats = array(array(\'first\', \'sub-first\', \'sub-sub-first\'),
                    array(\'second\', \'sub-second\'),
                    array(\'third\', \'sub-third\', \'sub-sub-third\')); ?>
<label>Categorias</label> <?php
foreach($cats as $cat):
  if (isset($cat[0])): ?>
    <div class="div1">
      <input type="radio" id="<?php echo $cat[0] ?>" name="age" value="30">
      <label for="<?php echo $cat[0] ?>"><?php echo $cat[0] ?></label> <?php
      if (isset($cat[1])):?>
        <ul class="ul2">
          <li class="li2">
            <input type="radio" id="<?php echo $cat[0] ?>" name="SUB" value="60">
            <label for="<?php echo $cat[1] ?>"><?php echo $cat[1] ?></label><?php
            if (isset($cat[2])):?>
              <ul class="ul3">
                <li class="li3"><a href="#"><?php echo $cat[2] ?></a> </li>
              </ul> <?php
            endif; ?>
          </li>
        </ul> <?php
      endif; ?>
    </div> <?php
  endif;
endforeach; ?>
<style media="screen">
  ul{
    list-style: none;
  }
  a{
    text-decoration: none;
  }
  a:hover{
    color:#EF7522;
  }
  .div1 ul{
    display:none;
  }
  .div1 input:checked ~ ul {
    display: block;
  }
</style>