javascript - 单击我的图标时如何显示和隐藏我的内容

Question

我刚刚创建了一个卡片表单( Bootstrap )，并在表单中，有一个加号图标和隐藏内容(id=mycontent_1 with display: none)。我想要做的事情列出如下。我尝试在我的 java 脚本上执行第一个操作，但它不起作用。

1. 当我点击加号图标时，我的功能(切换器)应该被执行，图标将被隐藏，我的内容(文本框和删除按钮)必须可见。

2. 同样，在相反的方向上，当我单击删除按钮时，我的内容(文本框和删除按钮)必须是不可见的，并且加号图标应该可见。

我的两项职能需要您的帮助。这是我的 jsfiddle 代码。

https://jsfiddle.net/Sanchez/aq9Laaew/219304/

       <div class="col-sm-6">
            <div class="card">
              <div class="card-header" id="cardHeader1" style="visibility: hidden;"> no name </div>
          <div class="card-body">
            <a href="#" class="btn btn-info btn-lg" onclick="toggler('myContent_1');">
              <span class="glyphicon glyphicon-plus" id=icon1  onclick="toggler('myContent_1');"></span> Plus 
            </a>
                <div id="myContent_1" class="card-title" style="display: none;" >
              <form action="" method="post">
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">Number</span>
                    </div>
                    <input type="text" id="notiSeq_1" name="notiSeq" class="form-control" value="">
                    <div class="input-group-append">
                    <span class="input-group-text">
                      <i class="fa fa-sort-numeric-asc"></i>
                    </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">Title</span>
                    </div>
                    <input type="text" id="title_1" name="title" class="form-control" value="">
                    <div class="input-group-append">
                    <span class="input-group-text">
                      <i class="fa fa-tumblr"></i>
                    </span>
                    </div>
                  </div>
                </div>

                <div class="form-group form-actions">
                   <button type="button" id="delBtn_1" class="btn btn-danger">Delete</button>
                </div>
                </form>
                </div>
                </div>
                </div>
                </div>



function toggler(divId){  

   var tempId = divId.slice(-1);
   var x = document.getElementById("icon" + tempId);
   var y = document.getElementById("cardHeader" + tempId);
   x.style.display = "none";
   y.style.visibility = "visible";
   $("#delBtn_" + tempId).show();
   $("#" + divId).toggle();

}

Answer 1

首先，您应该将 js 代码放在正文之前的头部。然后，将 a 标记替换为 button最后在删除按钮的 onclick 上调用 toggler 函数

<script>
   function hidePlusBtn() {
       $("#plusBtn").hide();
   }

   function toggler(divId) {  
       var tempId = divId.slice(-1);
       var x = document.getElementById("icon" + tempId);
       var y = document.getElementById("cardHeader" + tempId);
       x.style.display = "none";
       y.style.visibility = "visible";
       $("#delBtn_" + tempId).show();
       $("#" + divId).toggle();
   }
</script>  

<div class="col-sm-6">
      ...
     <button 
            id="plusBtn" 
            class="btn btn-info btn-lg" 
            onclick="toggler('myContent_1');">
              <span 
                  class="glyphicon glyphicon-plus" 
                  id=icon1  
                  onclick="toggler('myContent_1');">
              </span> Plus 
    </button>
     ...
     <button 
          type="button" 
          id="delBtn_1" 
          class="btn btn-danger" 
          onclick="toggler('myContent_1'); hidePlusBtn()">Delete
     </button>
  ...
</div>

更新的演示:https://jsfiddle.net/1s390orm/