javascript - 基本的 javascript 按钮功能(隐藏/显示内容)

Question

首先，我不擅长这个，我发现了类似的问题和答案，但这些并没有让我能够解决自己的问题。

我的问题如下:单击按钮后会显示包含内容的 div。 我最接近的是只使用 html 和 css，点击按钮会导致隐藏它自己的 div 并显示其他的(基本上与我想要实现的完全相反)。在我恢复对 html/css 的“感觉”后，我开始使用 javascript 并重写一些东西。

结果:(html)

$(document).ready(function () {

 $("#button").click(function (){
    var target = '#' + $(this).data('target');
    $("#hidden-div").slideUp()
    $(target).slideDown()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main" id="main">
    <section class="listview">
    <h1 class="title">List of functions used on the page</h1>
    <ul class ="list" id="list">
        <li>Splash page.
        <button class="btn-list" data-target="splash-div" id="splash-btn">Explanation</button><br>
        <div class="hidden-div" id="splash-div">blablabla</div><br>
        <a class="listlink" href="#splash">Take me there!</a></li>
        <li>Interactive list.
        <button class="btn-list" data-target="list-div" id="list-btn">Explanation</button><br>
        <div class="hidden-div" id="list-div">blablabla</div><br>
        <a class="listlink" href="#list">Take me there!</a></li>
    </ul>
    </section>
</div>

编辑代码。

我试过 .css(而不是显示)，首先尝试隐藏 true/false，然后是 content: none/block。

Content none/block 是我在不使用 javascript 的情况下使其“工作”的方法。

我是否遗漏了一些明显的东西？还是我尝试使用错误的功能？

Answer 1

根据您的要求，我更新了您的Q结构并应用了适合您情况的函数。 如果这不是您想要的，请发表评论，我将对其进行重组并根据您的需要进行回答。希望这对您有所帮助!

为您更新的代码

$(document).ready(function() {

  $("body").on('click', '.btn-list', function() {
    $(".hidden-div").hide();
    $(this).closest(".hideClass").find(".hidden-div").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main" id="main">
  <section class="listview">
    <h1 class="title">List of functions used on the page</h1>
    <ul class="list" id="list">
      <li class="hideClass">
        <p>Splash page1.</p>
        <button class="btn-list" data-target="#splash-div" id="splash-btn">Show me more</button><br>
        <div class="hidden-div" id="splash-div">blablabla</div>
        <a class="listlink" href="#splash">Take me there!</a>
      </li>
      <li class="hideClass">
        <p>Splash page2.</p>
        <button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
        <div class="hidden-div" id="list-div">blablabla</div>
        <a class="listlink" href="#list">Take me there!</a>
      </li>
      <li class="hideClass">
        <p>Splash page3.</p>
        <button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
        <div class="hidden-div" id="list-div">blablabla</div>
        <a class="listlink" href="#list">Take me there!</a>
      </li>
      <li class="hideClass">
        <p>Splash page4.</p>
        <button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
        <div class="hidden-div" id="list-div">blablabla</div>
        <a class="listlink" href="#list">Take me there!</a>
      </li>
      <li class="hideClass">
       <p>Splash page5.</p>
        <button class="btn-list" data-target="#list-div" id="list-btn">Show me more</button><br>
        <div class="hidden-div" id="list-div">blablabla</div>
        <a class="listlink" href="#list">Take me there!</a>
      </li>
    </ul>
  </section>
</div>