按钮 onClick 事件

Question

对于一个研究项目，我尝试为交互式地图制作侧边栏。

我有一个触发 onClick() 事件的按钮，它显示 带有表单输入的<ul>。

到目前为止，我有 3 个问题。

1) 我可以检查按钮是否已被点击，以便再次隐藏我的附加内容吗？如果是这样，我该如何实现？

2) 目前我只显示内容，但我想要一个动画。同样，您可以给我一些信息来执行此操作或提供链接/教程。

3) 如果有的话，是否有更好的解决方案来解决我的问题。可以给个提示吗？

function showDropdown(x) {
  let id = x;

  if (id == 1) {
    document.getElementById("1").style.display = "block";
    console.log(id);
  }

  if (id == 2) {
    document.getElementById("2").style.display = "block";
    console.log(id);
  }

  if (id == 3) {
    document.getElementById("3").style.display = "block";
    console.log(id);
  } else {
    console.log(id);
  }
}

.nav-sidebar>ul {
  display: none;
}

<div class="container-fluid">
  <div class="row">


    <div class="col-sm-3 col-md-2 sidebar">
      <div class="nav nav-sidebar">
        <button type="button" onclick="showDropdown(1)" class="dropdown-header">Einwohner</button>
        <ul class="dropdown-item" id="1">
          <li>
            <p>Feld 1:<span style="padding-left: 10px;"><input type="text" Placeholder="a" size="2"</span></p>
          </li>
          <li>
            <p>Feld 2:<span style="padding-left: 10px;"><input type="text" Placeholder="b" size="2"</span></p>
          </li>
          <li>
            <p>Feld 3:<span style="padding-left: 10px;"><input type="text" Placeholder="c" size="2"</span></p>
          </li>
        </ul>
      </div>
    </div>

Answer 1

按照我在评论中的建议使用数据属性和 jQuery 滑动切换。

请注意，我不喜欢数字 ID，所以我在 ID 前加上 u。

$(function() {
  $(".dropdown-header").on("click", function() {
    var id = $(this).attr("data-id");
    $("#" + id).slideToggle()
    console.log(id);
  });
});

.nav-sidebar>ul {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <div class="nav nav-sidebar">
        <button type="button" data-id="u1" class="dropdown-header">Einwohner</button>
        <ul class="dropdown-item" id="u1">
          <li>
            <p>Feld 1:&nbsp;<input type="text" Placeholder="a" size="2" /></p>
          </li>
          <li>
            <p>Feld 2:&nbsp;<input type="text" Placeholder="b" size="2" /></p>
          </li>
          <li>
            <p>Feld 3:&nbsp;<input type="text" Placeholder="c" size="2" /></p>
          </li>
        </ul>
      </div>
    </div>

Answer 2

您将 jQuery 放在标签中，所以我想您可以使用它，see this fiddle

您可以使用toggle() 或slideToggle() 函数来显示/隐藏内容。

$('button').click(function(){
    $('.dropdown-item').slideToggle();
});

Answer 3

您可以使用 jQuery 的.slideToggle() 函数来实现所有这些。

function showDropdown(x) {
  let id = x;

  if (id == 1) {
    $("#1").slideToggle();
    console.log(id);
  }

  if (id == 2) {
     $("#2").slideToggle();
    console.log(id);
  }

  if (id == 3) {
    $("#3").slideToggle();
    console.log(id);
  } else {
    console.log(id);
  }
}

通过使用 slideToggle，您可以检查当前状态是什么，将其切换到相反的状态，它也会动画。

编辑；另一个用户打败了我。

Answer 4

1- 检查按钮是否被点击。

你可以通过在外面赋值一个变量i=0来做到这一点，当你执行onClick操作时makeit i=1，在你执行onclick操作之前，检查值是1还是0。

但是还有另一种使用 jquery 的方法。

Hide and show elements using jquery

如果你想用小动画的方式来做。在 Jquery 中使用淡入淡出函数

Hide and show elements using fade()

如果你想要侧面导航栏的教程

W3schools sidenav tutorial