0

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

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

为了更好地理解：http: //jsfiddle.net/7zTc2/1/

不知何故，该示例不起作用，但是如果您将内容复制到本地文件中，它就可以工作。我做了前三个列表，我希望它对所有“子”列表也能像这样工作。如果有人可以帮助我，我将不胜感激！

4

1 回答 1

2

再会！根据我从您的问题中了解到的情况，我是这样做的：

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();
});
于 2013-04-14T23:48:43.773 回答