Question

我现在真的被困在这里，只是想知道是否有人能想到解决我问题的简单方法。我有几个嵌套的<ul>项目，每个项目都有<li>个。{ 我想要发生以下事情：

每当我点击一个<li>项并且它包含另一个<ul>时，它应向下滑动并向我显示所有列表项，同时关闭相同“嵌套级别”上的其他列表。我试图意识到这一点，但我真的不想为每个可能的星座编写一些代码，我认为有一种更简单的方法。

不知何故，该示例无法正常工作，但如果将内容复制到本地文件中则可行。我做了前三个列表，我希望它对所有“孩子”列表都这样工作。如果有人能帮助我，我真的很感激！

Answer 1

美好的一天！根据我对你的问题的理解，我就是这样做的：

HTML标记

<ul>
  <li>
    <span>value 1</span>
    <ul>
      <li>
        <span>inner value 1</span>
        <ul>
          <li>inner inner value 1</li>
          <li>inner inner value 2</li>
          <li>inner inner value 3</li>
        </ul>
      </li>
      <li>
        <span>inner value 2</span>
        <ul>
          <li>inner inner value 1</li>
          <li>inner inner value 2</li>
          <li>inner inner value 3</li>
        </ul>
      </li>
      <li>
        <span>inner value 3</span>
        <ul>
          <li>inner inner value 1</li>
          <li>inner inner value 2</li>
          <li>inner inner value 3</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <span>value 2</span>
    <ul>
      <li>inner value 1</li>
      <li>inner value 2</li>
      <li>inner value 3</li>
    </ul>
  </li>
  <li>
    <span>value 3</span>
    <ul>
      <li>inner value 1</li>
      <li>inner value 2</li>
      <li>inner value 3</li>
    </ul>
  </li>
</ul>

<强> CSS

li > ul {
  display: none;
}

<强> JQuery的

$("ul > li").has("> ul").click(function(e) {
  e.stopPropagation();
  $(this).find("> ul").slideToggle();
  $(this).siblings("li").find("> ul").slideUp();
});
$("ul > li").click(function(e) {
  e.stopPropagation();
});

适用于多个<li>元素的slideDown和Up </li>

1 个答案: