Question

这应该是一个非常基本的问题。我想要一些HTML列表：

A
乙
C

点击其中一个元素，下面会显示一些内容。例如，单击B时，我们获得：

A
B
“bla bla bla”
C

我想有很多方法可以实现这一目标。我只想要最简单/最干净的方法。

谢谢，
阿诺

Answer 1

<script>
function open_item(sender) {
    sender.getElementsByTagName('div')[0].style.display = 'block';
}
</script>

...

<ul>
   <li onclick="open_item(this);">
      A
      <div style="display: none;">bla bla</div>
   </li>
   <li onclick="open_item(this);">
      B
      <div style="display: none;">bla bla</div>
   </li>
   <li onclick="open_item(this);">
      C
      <div style="display: none;">bla bla</div>
   </li>
</ul>

实现同样目标的众多方法之一。

Answer 2

我会使用jQuery。给每个元素一个ID，通过jQuery为每个元素设置一个onClick监听器，让它运行一个查找子元素的函数（比如<p>或者你想用它包围的东西）并显示它。

Answer 3

这是一个使用insertAfter

的简单jQuery函数

$('li').click(function() {
    $('<span>blah blah</span>').insertAfter(this);
});

在此处查看此行动：http://jsfiddle.net/WwCcF/

Answer 4

您可以使用jQuery添加动态内容：

$("li").click(function() {
    $(this).append("<br />bla bla bla");
});

我写了一个纯JavaScript代码......

javascript可点击的文字

4 个答案: