Question

我如何使用JavaScript，HTML和CSS创建它？

因此，当我点击某些内容时（在这种情况下，是一个项目的名称），某些内容会下拉，它会显示有关该项目的信息。

我怎么能这样做？

谢谢。

Answer 1

你需要在CSS中使用display：none属性创建一个div的div（在开头设置它是不可见的）。然后你需要在div上创建一个监听器，它会触发一个javascript函数：

HTML

<div class="hidden" id="clkItem">Your text</div>

CSS

.hidden {display: none;}

JS

document.getElementById("clkItem").addEventListener("click", function (e){showItem(e);});

function showItem(e) {
e.target.style.display = "block";//Won't work in older IEs
}

Answer 2

在文件的<head>中：

<style type="text/css">
  .details {
    display: none;
  }
</style>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".project").on('click', function() { 
            $(this).parent().find('.details').slideDown();
        });
    });
</script>

在文件的<body>中：

<div>
  <span class="project">Project 1</span>
  <div class="details">Some details</div>
</div>
<div>
  <span class="project">Project 2</span>
  <div class="details">Some details</div>
</div>
<div>
  <span class="project">Project 3</span>
  <div class="details">Some details</div>
</div>

OnClick使用JavaScript和HTML下拉文本

2 个答案: