Question

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

我有一个触发onClick（）事件的按钮显示带有表单输入的<ul>。

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

1）我可以检查按钮是否已被点击，以便我可以再次隐藏其他内容吗？如果是这样，我怎么能实现呢？

2）在片刻我只显示内容，但我希望有一个动画。同样，您可以给我一些信息来做这件事或提供链接/教程。

3）如果有问题，是否有更好的解决方案。你可以给我一个暗示吗？

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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

Answer 2

您可以使用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 3

按我在评论中的建议使用数据属性和jQuery slidetoggle。

请注意我不喜欢数字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 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

按钮onClick事件

4 个答案: