Question

我的某些页面上有一堆<ul>和一堆<li>，我试图弄清楚如何使用jquery对它们进行分组并创建一个可点击的show-hide UL so so我的页面没有巨大的卷轴。

我的UL看起来像这样

<ul class="my-ul">
<li class="Colour green small">text</li>
<li class="Colour green large">text</li>
<li class="Colour green medium">text</li>
<li class="Colour red small">text</li>
<li class="Colour red large">text</li>
</ul>

我试图按类别（颜色）和属性（绿色）对它们进行分组，所以我的页面中会有这样的内容：

- Colour

并点击，列出其所有孩子

- Colour
  - green

点击绿色，列出所有绿色孩子

- Colour 
  - green
    - small
    - large
    - medium

这可以通过jquery吗？

我可以在PHP脚本中操作如何构建<ul>和<li>。

Answer 1

你必须在lis中做出子选择......如下所示：

$("li").on("click",function(event){
  $(this).find("> ul").toggle();
  event.stopPropagation(); //you don't want to affect the clicked element's parent...
})

.green {
  color:green;
}
.red {
  color:red;
}
.small {
  font-size:small;
}
.large {
  font-size:large;
}
ul {
    list-style:none;
}
li {
    cursor:pointer;
}
ul ul {
  display:none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="my-ul">
  <li class="Colour">
    Colour
    <ul>
        <li class="green">
          green
          <ul>
            <li class="small">small green</li>
            <li class="large">large green</li>
            <li class="medium">medium green</li>
          </ul>
        </li>
        <li class="red">
          red
          <ul>
            <li class="small">small red</li>
            <li class="large">large red</li>
            <li class="medium">medium red</li>
          </ul>
       </li>
    </ul>
  </li>
</ul>

Answer 2

我认为此示例对您有用。只需点击ul-red或ul-green li并打开sub-ul（sub-green，sub-red）。

<ul class="my-ul">
<li class="ul-green">Green</li>
<ul class="sub-green">
    <li class="small">text</li>
    <li class="large">text</li>
    <li class="medium">text</li>
</ul>
<li class="ul-red">Red</li>
<ul class="sub-red">
    <li class="small">text</li>
    <li class="large">text</li>
</ul>
</ul>

jquery - 组合li元素并创建一个可切换的隐藏显示ul

2 个答案: