|
|
|
Выпадающее меню
|
|||
|---|---|---|---|
|
#18+
Добрый день. Подскажите пожалуйста. Есть выпадающее меню. Подробнее: 1. Нажимаю на кнопку 2. Выпадет меню 3. в данном меню 1 пункт это ввод имени (input), 2 пункт телефон (input) и тд. 4. меню остается открытым до того пока не нажмешь в поле куда вводить данные. 5. соответственно на жал курсором в поле ввести ФИО, выпадающий список закрывается. КАК ЭТО ИСПРАВИТЬ? КОД НИЖЕ. <div class="dropdown"> <button onclick="myFunction()" class="mainmenubtn">Оставить заявку</button> <div id="myDropdown" class="dropdown-child"> <p><input name="ФИО" size="" placeholder="ФИО"></p> <p><input name="Телефон" size="" placeholder="Телефон"></p> <a href="#">Подраздел 3</a> <a href="#">Подраздел 4</a> <p><textarea rows="5" cols="15" name="text"></textarea></p> <p><input value="Отправить" type="submit" size=""></p> </div> </div> ______________________________________________________________________________ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.mainmenubtn')) { var dropdowns = document.getElementsByClassName("dropdown-child"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } ______________________________________________________________________________________ .mainmenubtn { background-color: #d7c074; color: #4e2c1e; font-size: 1em; cursor: pointer; border-radius: 8px; width: 174px; height: 26px; } .mainmenubtn:active { color: white; } .dropdown { position: relative; display: inline-block; float:right; top: -113px; z-index: 5; } .dropdown-child { display: none; position: absolute; background-color: #f1f1f1; overflow: auto; z-index: 1; width: 324px; height: 342px; right: 0px; } .dropdown-child a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 01.03.2020, 08:54 |
|
||
|
Выпадающее меню
|
|||
|---|---|---|---|
|
#18+
Я думаю function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } document.getElementById("myDropdown").addEventListener('click', (ev) => ev.stopPropagation()) // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.mainmenubtn')) { var dropdowns = document.getElementsByClassName("dropdown-child"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } Submit то есть. <input value="Отправить" type="submit" size=""> А что submit, куда submit, кому submit? Где <form>? ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 01.03.2020, 23:17 |
|
||
|
Выпадающее меню
|
|||
|---|---|---|---|
|
#18+
voraa, Спасибо. Работает. Но теперь другая проблема. Нужно чтобы меню закрывалось кликом вне области меню. ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 02.03.2020, 14:18 |
|
||
|
Выпадающее меню
|
|||
|---|---|---|---|
|
#18+
function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } document.getElementById("myDropdown").addEventListener('click', (ev) => ev.stopPropagation()) document.addEventListener('click', () => document.querySelectorAll('.dropdown-child.show').forEach(el => el.classList.remove('show'))) // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.mainmenubtn')) { var dropdowns = document.getElementsByClassName("dropdown-child"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 02.03.2020, 15:52 |
|
||
|
Выпадающее меню
|
|||
|---|---|---|---|
|
#18+
voraa, сорри. но не робит))))) почему-то ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 02.03.2020, 17:39 |
|
||
|
Выпадающее меню
|
|||
|---|---|---|---|
|
#18+
Не обратил внимания, что кнопка в другом div. Тогда так. В html изменить <button onclick="myFunction( event )" class="mainmenubtn">Оставить заявку</button> javascript function myFunction( ev ) { document.getElementById("myDropdown").classList.toggle("show"); ev.stopPropagation() } document.getElementById("myDropdown").addEventListener('click', (ev) => ev.stopPropagation()) document.addEventListener('click', () => document.querySelectorAll('.dropdown-child.show').forEach(el => el.classList.remove('show'))) // Close the dropdown if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.mainmenubtn')) { var dropdowns = document.getElementsByClassName("dropdown-child"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } } ... |
|||
|
:
Нравится:
Не нравится:
|
|||
| 02.03.2020, 19:27 |
|
||
|
|

start [/forum/topic.php?fid=22&msg=39932817&tid=1443523]: |
0ms |
get settings: |
10ms |
get forum list: |
14ms |
check forum access: |
4ms |
check topic access: |
4ms |
track hit: |
58ms |
get topic data: |
11ms |
get forum data: |
3ms |
get page messages: |
40ms |
get tp. blocked users: |
1ms |
| others: | 231ms |
| total: | 376ms |

| 0 / 0 |
