скрыть шоу с поддержкой html5 - PullRequest
Новая
       4

скрыть шоу с поддержкой html5

0 голосов
/ 30 октября 2018

Мне нужна помощь. когда я нажимаю ЭТО 1 и ЭТО 2, появляется окно ввода моя проблема Я хочу щелкнуть ЭТО ЕСТЬ 1 и перенести поле ввода в ЭТО ЕСТЬ 1, не щелкая ЭТО ЕСТЬ 2, и все еще перенести поле ввода в ЭТО ЕСТЬ 1. Поэтому я хочу, когда я нажимаю ЭТО ЕСТЬ 1, поле ввода становится ниже ЭТОГО 1, когда я нажимаю ЭТО IS 2, поле ввода находится ниже ЭТОГО 2 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>

    </head>

    <body>
    <span onclick="MFunction()">THIS IS 1</span>
    <p></p>
    <span onclick="MFunction()">THIS IS 2</span>
    <div id="showhide" style="display:none;">
                        <input type="text"  required>
                        <br></br>
                    <button  class="btn btn-md-2 btn-primary">submit</button> 
                    </div>
    <script>
    function MFunction() {
        var x = document.getElementById("showhide");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
    </script>
    </body>
    </html>

1 Ответ

0 голосов
/ 30 октября 2018

Если вы хотите использовать тот же showhide div для отображения под выбранным элементом, чем вам может понадобиться использовать insertBefore при клике.

См. Фрагмент ниже: 

function MFunction(event) {
        var x = document.getElementById("showhide");
        if (x.style.display === "none") {
            x.style.display = "block";
        }
        
        x.parentNode.insertBefore(x, event.target.nextSibling);
    }
    document.addEventListener('click', function(event){
    	if(event.target.className.includes("thisis")){
      	MFunction(event);
      }
    });
    
    //document.getElementById("thisis1").addEventListener("click", MFunction);
    //document.getElementById("thisis2").addEventListener("click", MFunction);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>

    </head>

    <body>
    <span id="thisis1" class="thisis">THIS IS 1</span>
    <p></p>
    <span id="thisis2" class="thisis">THIS IS 2</span>
    <p></p>
    <span id="thisis3" class="donotshow">DO NOT SHOW ON THIS IS</span>
    <div id="showhide" style="display:none;">
                        <input type="text"  required>
                        <br><br>
                    <button  class="btn btn-md-2 btn-primary">submit</button> 
                    </div>
    </body>

Вы также можете проверить это здесь

Обновление 1:

Я обновил ответ, чтобы добавить событие одного клика для нескольких элементов. Вы можете проверить это здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...