在javascript中隐藏表或表单

我想在单击其他元素时隐藏

HTML

元素。 我有一个带有两个选项的子菜单。一个选项显示表格，另一个选项显示窗体。当我点击第一个选项时，表格就会出现。如果在单击第二个选项后，将显示上一个表和表单

菜单如下：

在行动中我得到一张桌子，在另一个行动中我得到一张表格

HTML

中的代码是：

     <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
        <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <a class="dropdown-item" href="#" onclick="origin()">Action</a>
                  <a class="dropdown-item" href="#" onclick="formOrigin()">Another action</a>
       </div>
       <div>
          <table class="table"></table>
       </div>
       <div>
          <form>
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" class="form-control" id="name" placeholder="Enter name">
            </div>
            <div class="form-group">
               <label for="city">City</label>
               <input type="text" class="form-control" id="city" placeholder="city">
            </div>
            <div class="form-group form-check">
               <input type="checkbox" class="form-check-input" id="add">
               <label class="form-check-label" for="add">Check</label>
            </div>
             <button type="submit" class="btn btn-primary">Submit</button>
          </form>

       </div>

    function origin() {

        var url = "http://localhost:8000/api/v1/origin";
        petition.onreadystatechange = ResponseOrigin;
        petition.open("GET", url, true);
        petition.send();
        }

    function ResponseOrigin(){
        var response;
        text="<tr><th>Identifier</th><th>Name</th><th>Numero</th><th>City</th></tr>";
                if (petition.readyState == 4)
                    if (petition.status == 200) {
                        responser = petition.responseText;
                        var responseC = response.split("<");
                        var responseV = responseC[0];
                        var data = JSON.parse(responseV);
                        for (var i = 0; i < data.length; i++) {

                                text += "<tr id =" + data[i].id + "><td>" + data[i].id + "</td><td id='name'>" + data[i].name + "</td><td>" + 
                                data[i].city + "</td>                                 

                        document.getElementById('table').innerHTML = text;

                        document.formOrigin.style.display="none";
                    }
                    else alert("Problem with URL");
            }

     function formOrigin() {


         var url = "http://localhost:8000/api/v1/origin";
            petition.onreadystatechange = responseAddOrigin;
            petition.open("POST", url, true);
            petition.send(JSON.stringify({name: document.formOrigin.name.value,
                city: document.formOrigin.city.value}));

       }
      function responseAddOrigen(){

            var response;
            if (petition.readyState == 4)
                if (petition.status == 200) {
                    response = petition.responseText;
                    alert ("data recorded correctly");
                }
                else
                    alert("Problem with URL");
        }

---

由于您使用的是引导，您可以尝试以下方法：

$('yourTriggerElement').click(function(){
    $('yourTargetElement').addClass('d-none');
});

---

这会将引导类“d-none”添加到目标元素中，这与display none相同。如果希望使用相同的触发器再次显示元素，可以添加一些条件。用真实id或类更改“yourtriggerement”和“yourTargetElement”。

而“this”的作用是什么？将引导类d-none添加到目标元素，即display none。