30/09/2018, 21:03
Click Dropdown menu mutiplevel with css and javascript
Theo yêu cầu là khi click vào button thì sổ ra item1, item2, item3, item4. Click vào item1 thì xổ ra item1.1 và item 1.2 không bị đè lên item3 mà co dãn ra để đủ vị trí cho tất cả.
Đã thử set left, top cho position nhưng vẫn không được. Ai có giải pháp giúp mình với.
Code:
`<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <style type="text/css" media="screen"> .dropbtn{ background-image: url("dropdownicon.png"); background-repeat: no-repeat; width:50px; height: 50px; border: none; cursor: pointer; }
.dropdown{ position: relative; display: inline-block; }
.dropdown-content{ display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content1{ display: none; position: absolute; background-color: #f9f9f9; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content1 a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content4{ display: none; position: absolute; background-color: #f9f9f9; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content4 a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .show {display:block;}
</style> </head> <body> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn"></button> <div id="myDropdown" class="dropdown-content"> <a href="#" onclick="myFunction1()" class="bdropbtn1">Item1</a> <div id="myDropdown1" class="dropdown-content1"> <a href="">Item 1.1</a> <a href="">Item 1.2</a> </div> <a href="#">Item2</a> <a href="#">Item3</a> <a href="#" onclick="myFunction4()" class="dropbtn4">Item4</a> <div id="myDropdown4" class="dropdown-content4"> <a href="">Item4.11111111111111111111111111111111111111</a> <a href="">Item4.2111111111111111111111111111111111111</a> </div> </div> </div>
<script type="text/javascript"> function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function myFunction4() { document.getElementById("myDropdown4").classList.toggle("show"); }
function myFunction1() { document.getElementById("myDropdown1").classList.toggle("show"); }
</script> </body> </html>`
Bài liên quan
bỏ hết các thuộc tính position đi là được.
oh.nãy nhầm.được rồi.thanks bạn nhiều