Question

我的HTML结构如下。我试图用图标展开和折叠每个节点。

    <div id="content">
  <h2>Celebs</h2>
    <ul id="celebTree">
      <li>A-list Celebrities
        <ul>
          <li>In a successful band
        <ul>
          <li><input type="checkbox" /><a href="#">Johnny Stardust</a></li>
          <li><input type="checkbox" /><a href="#">Glendatronix</a></li>
        </ul>
          </li>
          <li>In an indie band
        <ul>
          <li><input type="checkbox"/><a href="#">Computadors</a></li>
          <li><input type="checkbox"/><a href="#">The Great Apes</a></li>
          <li><input type="checkbox"/><a href="#">Bosom</a></li>
        </ul>
          </li>
          <li>In film or television
        <ul>
          <li><input type="checkbox"/><a href="#">Kelly Kellie</a></li>
          <li><input type="checkbox"/><a href="#">Amelia Austin</a></li>
        </ul>
          </li>
          <li>Famous because they're rich
        <ul>
          <li>Famous parents
            <ul>
              <li>Vienna Sheraton</li>
            </ul>
          </li>
          <li>Dot-Com millionaires
            <ul>
              <li>Joel Mynor</li>
            </ul>
          </li>
        </ul>
          </li>
        </ul>
      </li>
    </ul>
</div>

我正在使用此代码切换

$('#celebTree ul')
    .hide()
    .before('<span></span>')
    .prev()
    .addClass('handle closed')
    .click(function() {
      $(this)
        .toggleClass('closed opened')
        .nextAll('ul')
        .toggle();
});

但是我的节点都没有打开。我究竟做错了什么？ http://jsfiddle.net/zvopye7z/

Answer 1

你的<span>是空的，所以没有指定任何宽度或高度，它不会占用页面上的任何内容;应用于它的样式仅指定了背景图像和块显示类型。

为了说明这一点，将这两种样式添加到.handle会使它们显示出来：

width:2em;
height:1em;

Demo

Answer 2

由于您的跨度是空的，因此无需点击。您可以使用CSS显示要点击的内容：

.closed:before {
    content: "+";
}
.opened:before {
    content: "-";
}

您还可以使用width属性（如杰克的答案），将其与相邻文字相关联。

.handle { 
    background: transparent url( tree-handle.png ) no-repeat left top; 
    display:block; 
    float:left;
    cursor:pointer;
    width: 1em;
}

这是一个有效的演示：

＆＃13;

$('#celebTree ul')
  .hide()
  .before('<span></span>')
  .prev()
  .addClass('handle closed')
  .click(function() {
    $(this)
      .toggleClass('closed opened')
      .nextAll('ul')
      .toggle();
  });

＆＃13;

#celebTree,
#celebTree ul {
  list-style-type: none;
  margin-left: 25px;
  margin-bottom: 5px;
  padding: 0;
}
.handle {
  background: transparent url(tree-handle.png ) no-repeat left top;
  display: block;
  float: left;
  cursor: pointer;
  width: 1em;
}
.closed {
  background-position: left top;
}
.closed:before {
  content: "+";
}
.opened {
  background-position: left -10px;
}
.opened:before {
  content: "-";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <h2>Celebs</h2>
  <ul id="celebTree">
    <li>A-list Celebrities
      <ul>
        <li>In a successful band
          <ul>
            <li>
              <input type="checkbox" /><a href="#">Johnny Stardust</a>
            </li>
            <li>
              <input type="checkbox" /><a href="#">Glendatronix</a>
            </li>
          </ul>
        </li>
        <li>In an indie band
          <ul>
            <li>
              <input type="checkbox" /><a href="#">Computadors</a>
            </li>
            <li>
              <input type="checkbox" /><a href="#">The Great Apes</a>
            </li>
            <li>
              <input type="checkbox" /><a href="#">Bosom</a>
            </li>
          </ul>
        </li>
        <li>In film or television
          <ul>
            <li>
              <input type="checkbox" /><a href="#">Kelly Kellie</a>
            </li>
            <li>
              <input type="checkbox" /><a href="#">Amelia Austin</a>
            </li>
          </ul>
        </li>
        <li>Famous because they're rich
          <ul>
            <li>Famous parents
              <ul>
                <li>Vienna Sheraton</li>
              </ul>
            </li>
            <li>Dot-Com millionaires
              <ul>
                <li>Joel Mynor</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>B-list Celebrities
      <ul>
        <li>
          <input type="checkbox" /><a href="#">Mo' Fat</a>
        </li>
        <li>
          <input type="checkbox" /><a href="#">Darth Fader</a>
        </li>
      </ul>
    </li>
    <li>Up and Comers
      <ul>
        <li>
          <input type="checkbox" /><a href="#">Mr Speaker</a>
        </li>
        <li>
          <input type="checkbox" /><a href="#">The jQuery Ninja</a>
        </li>

      </ul>
    </li>
  </ul>
</div>

＆＃13;

节点没有用toggle切换（）

2 个答案: