Function slideToggle 未检测到先前的打开/关闭 state 仅 div 脚本 javascript

Question

Function slideToggle not detecting the previous open/close state of the div script only javascript because in jquery no problem but I only want javascript. Function slideToggle not detecting the previous open/close state of the div script only javascript because in jquery no problem but I only want javascript.

When I click on the second button the div opens and this closes right away as the script does not include detect the state I think but I do not see how to modify the javascript script to prevent the bug.当我单击第二个按钮时，div 打开并立即关闭，因为脚本不包括检测 state 我认为但我看不到如何修改 javascript 脚本以防止错误。 I want each button to open and close its own div.我希望每个按钮打开和关闭自己的 div。

current result: https://jsfiddle.net/vincent1890/5fje4zwv/2/当前结果： 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>

Answer 1

HTML 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 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")
    }
  }
}

This handler changes every element currently shown to hidden, then executes the clickHandler and shows the button only which was clicked.此处理程序将当前显示的每个元素更改为隐藏，然后执行 clickHandler 并仅显示被单击的按钮。

You can add more css to this for better visuals.您可以在其中添加更多 css 以获得更好的视觉效果。

Check out this JSFiddle看看这个JSFiddle

Answer 2

You can do like this with jquery你可以这样做 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>

Function slideToggle 未检测到先前的打开/关闭 state 仅 div 脚本 javascript

问题描述

2 个解决方案

解决方案1
1 2020-12-04 12:25:03

解决方案2
0 2020-12-04 12:05:30

Function slideToggle 未检测到先前的打开/关闭 state 仅 div 脚本 javascript

问题描述

2 个解决方案

解决方案1 1 2020-12-04 12:25:03

解决方案2 0 2020-12-04 12:05:30

解决方案1
1 2020-12-04 12:25:03

解决方案2
0 2020-12-04 12:05:30