函数 slideToggle 仅检测 div 脚本的先前打开/关闭状态 javascript答案

【问题标题】：Function slideToggle not detecting the previous open/close state of the div script only javascript函数 slideToggle 仅检测 div 脚本的先前打开/关闭状态 javascript
【发布时间】：2020-12-04 11:42:09
【问题描述】：

函数 slideToggle 没有检测到 div 脚本的先前打开/关闭状态只有 javascript，因为在 jquery 中没问题，但我只想要 javascript。

当我单击第二个按钮时，div 会打开并立即关闭，因为脚本不包括检测我认为的状态，但我看不到如何修改 javascript 脚本以防止错误。我希望每个按钮打开和关闭自己的 div。

当前结果： https://jsfiddle.net/vincent1890/5fje4zwv/2/

<!-- language: lang-html -->
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" type="text/css" href="css.css">
            <!-- <script src="https://code.jquery.com/jquery-1.12.4.js"></script> -->
            <style type="text/css">
            /* Just to play with animations */
            .header {
              padding: 10px 16px;
              background: #555;
              color: #f1f1f1;
              font-size: 0.835em;
              text-transform: uppercase;
              letter-spacing: 0.125em;
              font-weight: bold;
            }
            
            /* Some Generic styles */
            body {
              text-align: center;
              font-family: "Open Sans", Helvetica, Arial, sans-serif;
              color: #444;
              line-height: 1.6;
            }
            /* CSS styles "+ OPTIONS ..." */
            .bouton-deplier {
                text-decoration: none;
                color: #fff;
                background: #000;
                padding: 5px 10px;
                cursor: pointer;
            }
            .montexte {
                padding: 10px 10px 20px 10px;
            }
    
            #mdiv {
                height: 0px;
                margin-top: 0px;
                border-radius: 0px;
                font-weight: bold;
                text-align: center;
                overflow-y: hidden;
                background-color: #ef1;
                margin-bottom: 0em;
                color: rgba(0, 0, 0, .65);
            }
            #mdiv2 {
                height: 0px;
                margin-top: 0px;
                border-radius: 0px;
                font-weight: bold;
                text-align: center;
                overflow-y: hidden;
                background-color: #ef1;
                margin-bottom: 0em;
                color: rgba(0, 0, 0, .65);
            }
            </style>
        </head>
        <body onload="chg_item()">
            <div class="header" id="myHeader" >
                <button class="bouton-deplier" id="mbtn" onclick="slideToggle('mdiv', 50);">+ Options autres</button>
                <button class="bouton-deplier" id="mbtn2" onclick="slideToggle('mdiv2', 100);">+ Optionnel (Telephonie Audioconf)</button>
                <div id="mdiv">
                    <div class="montexte">
                        <label for="UidText">Uid (User):</label>
                        <input type="text" id="ChoisirUid" onfocus="this.value=''" onchange="chg_item()">
                    </div>
                </div>
                <div id="mdiv2">
                    <div class="montexte">
                        <label for="TelNumberText">Num Tel (User):</label>
                        <input type="text" id="ChoisirTelNumber" onfocus="this.value=''" onchange="chg_item()">
                        <br>
                        <label for="NomPrenomText">Nom Prenom :</label>
                        <input type="text" id="ChoisirNomPrenom" onfocus="this.value=''" onchange="chg_item()">
                    </div>
                </div>
            </div>
        </body>
        <script>
        var slideOpen = false;
        //var heightChecked = false;
        var initHeight = 60;
        var intval = null;
    
        function slideToggle(NameDiv, Height) {
            var initHeight = Height;
            
            window.clearInterval(intval);
            var NameDiv = document.getElementById(NameDiv);
            /*
            if(!heightChecked) {
                initHeight = NameDiv.offsetHeight;
                heightChecked = true;
            }
            */
            if(slideOpen) {
                var h = initHeight;
                slideOpen = false;
                intval = setInterval(function(){
                    h--;
                    NameDiv.style.height = h + 'px';
                    if(h <= 0)
                        window.clearInterval(intval);
                    }, 1
                );
            }
            else {
                var h = 0;
                slideOpen = true;
                intval = setInterval(function(){
                    h++;
                    NameDiv.style.height = h + 'px';
                    if(h >= initHeight)
                        window.clearInterval(intval);
                    }, 1
                );
            }
        }
        </script>
    </html>

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

HTML

<div class="container">
  <button id="btn1" class="btn" onclick="clickHandler('first')">First tab</button>
  <button id="btn2" class="btn" onclick="clickHandler('second')">Second tab</button>
  
  <div id="first" class="data hidden">Hello</div>
  <div id="second" class="data hidden">World!</div>
</div>

JavaScript

function clickHandler(id) {
  toggle("data");
  
  const div = document.getElementById(id);
  div.classList.add("shown");
  div.classList.remove("hidden");
}

function toggle(className) {
  const elements = document.getElementsByClassName(className);
  
  for (let i = 0; i < elements.length; i++) {
    const elm = elements[i];
    if (elm.classList.contains("shown")) {
      elm.classList.remove("shown")
      elm.classList.add("hidden")
    }
  }
}

此处理程序将当前显示的每个元素更改为隐藏，然后执行 clickHandler 并仅显示被单击的按钮。

您可以为此添加更多 CSS 以获得更好的视觉效果。

看看这个JSFiddle

【讨论】：

您好@kmp 感谢您的帮助，但是否可以修改您的脚本以及如何让每个按钮独立打开和关闭 ca 自己的 div？
没问题，乐于助人！不要忘记关闭问题（接受其中一个答案），这样其他人就不会发送垃圾邮件解决方案。 :D 而且，一个赞成票会很好^_^
要完成脚本，如何添加第三个按钮以允许关闭所有两个 div 或在两个按钮之一上重新应用第二次。

【解决方案2】：

你可以用 jquery 做这样的事情

$(".bouton-deplier").click(function() {
  var btnID = $(this).attr('id');

  if ($(".textContent:visible").is(':visible')) {
    $(".textContent:visible").slideUp(0, function() {
      $("." + btnID + ".textContent").slideDown("slow");
    });
  } else {
    $("." + btnID + ".textContent").slideDown("slow");
  }
});

        .header {
          padding: 10px 16px;
          background: #555;
          color: #f1f1f1;
          font-size: 0.835em;
          text-transform: uppercase;
          letter-spacing: 0.125em;
          font-weight: bold;
        }
        
        /* Some Generic styles */
        body {
          text-align: center;
          font-family: "Open Sans", Helvetica, Arial, sans-serif;
          color: #444;
          line-height: 1.6;
        }
        /* CSS styles "+ OPTIONS ..." */
        .bouton-deplier {
            text-decoration: none;
            color: #fff;
            background: #000;
            padding: 5px 10px;
            cursor: pointer;
        }
        .montexte {
            padding: 10px 10px 20px 10px;
        }

        .mbtn {
            display:none;
            height: 60px;
            margin-top: 0px;
            border-radius: 0px;
            font-weight: bold;
            text-align: center;
            overflow-y: hidden;
            background-color: #ef1;
            margin-bottom: 0em;
            color: rgba(0, 0, 0, .65);
        }
        .mbtn2 {
            display:none;
            height: 60px;
            margin-top: 0px;
            border-radius: 0px;
            font-weight: bold;
            text-align: center;
            overflow-y: hidden;
            background-color: #ef1;
            margin-bottom: 0em;
            color: rgba(0, 0, 0, .65);
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header" id="myHeader" >
            <button class="bouton-deplier" id="mbtn">+ Options autres</button>
            <button class="bouton-deplier" id="mbtn2">+ Optionnel (Telephonie Audioconf)</button>
            <div class="mbtn textContent">
                <div class="montexte">
                    <label for="UidText">Uid (User):</label>
                    <input type="text" id="ChoisirUid" onfocus="this.value=''" onchange="chg_item()">
                </div>
            </div>
            <div class="mbtn2 textContent">
                <div class="montexte">
                    <label for="TelNumberText">Num Tel (User):</label>
                    <input type="text" id="ChoisirTelNumber" onfocus="this.value=''" onchange="chg_item()">
                    <br>
                    <label for="NomPrenomText">Nom Prenom :</label>
                    <input type="text" id="ChoisirNomPrenom" onfocus="this.value=''" onchange="chg_item()">
                </div>
            </div>
        </div>

【讨论】：

您好@The_Death_Raw 感谢您的回答，但 jquery 没问题，但我只想要脚本 javascript。