带有JavaScript和HTML的OnClick下拉文本

OnClick drop down text with JavaScript and HTML

本文关键字：文本 OnClick JavaScript HTML 带有      更新时间：2023-09-26

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

因此，当我点击某个东西（在本例中，是一个项目的名称）时，某个东西会掉下来，它会向我显示该项目的信息。

我怎么能这么做？

谢谢。

您需要在CSS中创建一个具有display:none属性的类的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
}

在文档的<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>
相关文章：