when i click the SVG with red background it doesn't work but if i click outside the svg area it works, and if i use normal text it also works fine.
the button appears to be hindered by SVG.
my question is why using SVG doesn't work, but using text works and what if I want it to work?
css :
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
float: right;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 0;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
html :
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">
<svg viewBox='0 0 10 8' width='40' style="background:red;">
<path d='M1 1h8M1 4h 8M1 7h8' stroke='#000' stroke-width='2' stroke-linecap='round'/>
</svg>
</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
javascript :
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
SVG does not work as a click area in most browsers. What you do is to put the following on your svg to make it "transparent for clicks" so to speak, or the correct term and what it does is actually make it non clickable.
.dropbtn > svg {
pointer-events: none;
}
Related
I am hoping to toggle multiple dropdowns on the same page. I have been trying to implement this using code I found on w3schools however it only toggles the first dropdown and not the second. Does anyone know how it would be possible for me to implement this code so I could toggle both dropdowns?
Any help on this issue would be appreciated.
function myFunction() {
var showDrop = document.getElementById("myDropdown");
showDrop.classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
document.querySelector(".dropbtn").onclick = myFunction;
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
<button class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
im making my website just using html code (with no bootstrap). I want to make a Dropdown List with a list of specs. The problem is once it is done when i open my List - the content which is going below does not move more below so it overlaps on the List.. Look at this picture to see what i have.
The ideal idea is to make the following:
So here when i open the List the below contet gose more below automatically (But this is bootstrap so i can not just copy that because i am using only html)
My html code is this:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
And css :
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
And javascript:
<script>
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('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
Example: https://codepen.io/anon/pen/VNojBe
Remove position: absolute; from .dropdown-content
Change to position: relative in .dropdown-content
This menu works if there is only one. But if I wanted to do 2 of them, the
window.onclick = function(event) only works for one menu. Why is that and is it easily fixable? How could I make the 2 menus work the same?.. javascript only please.. No jquery.
function openDrop() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: #6dc14b;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
width:100%;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #003400;
}
.dropdown {
width:300px;
margin:0 auto;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ddd;
min-width: 300px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #b9d8eb;}
.show {display: block;}
}
<div class="dropdown">
<button onclick="openDrop()" class="dropbtn">Company A</button>
<div id="myDropdown" class="dropdown-content">
<a>Type 1</a>
Type 2
</div>
</div>
You need to pass the id of your dropdown as a parameter of your openDrop() function, here is a quick fix:
function openDrop(menu) {
document.getElementById(menu).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background-color: #6dc14b;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
width:100%;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #003400;
}
.dropdown {
width:300px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ddd;
min-width: 300px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #b9d8eb;}
.show {display: block;}
}
<div class="dropdown">
<button onclick="openDrop('myDropdown1')" class="dropbtn">Company A</button>
<div id="myDropdown1" class="dropdown-content">
<a>Type 1</a>
Type 2
</div>
</div>
<div class="dropdown" style="float:right">
<button onclick="openDrop('myDropdown2')" class="dropbtn">Company B</button>
<div id="myDropdown2" class="dropdown-content">
<a>Type 3</a>
Type 4
</div>
</div>
After clicking on toggle how to change button value is click value on toggle list in angularJs ?
I have write this code please help me ? I have also explain the code how it work i need only after clicking on toggle how to change button value is click value on toggle list in angularJs .
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
min-width: 162px;
position:reletive;
font-weight:bold;
}
.dropbtn:after{
content: '';
border-top: 8px solid white;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
left: 75px;
position: absolute;
top: 37px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border:1px solid #3498DB;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-top:2px solid #3498DB;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
Write a html code
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" id="test" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
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('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
Once you have got the selected value within the javascript, assign that to the button value, using the following code:
document.getElementById("button_Name").innerHTML = selectedValueFromDropdown;
In your window.onclick function, you can add this fix :
if (!event.target.matches('.dropbtn a')) {
document.getElementById("test").innerHTML = event.target.innerHTML;
}
So that if you click on one of your "options" button, the innerHTML (the text) of your dropdown button takes the one of the option.
Full code (or CodePen.io :
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
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('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
if (!event.target.matches('.dropbtn a')) {
document.getElementById("test").innerHTML = event.target.innerHTML;
}
}
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
min-width: 162px;
position:reletive;
font-weight:bold;
}
.dropbtn:after{
content: '';
border-top: 8px solid white;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
left: 75px;
position: absolute;
top: 37px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
border:1px solid #3498DB;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-top:2px solid #3498DB;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="dropdown">
<button onclick="myFunction()" id="test" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</body>
</html>
And by the way, in your code, you don't use AngularJS :)
I follow this link to try to make a clickable dropdown menu.
I notice the code from the link is for one dropdown menu and I think this code is for create the dropdown menu.
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
I try to create another two dropdown menus so I copy the code above twice
2nd dropdown
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown2</button>
<div id="myDropdown" class="dropdown-content">
Home2
About2
Contact2
</div>
</div>
3rd dropdown
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown3</button>
<div id="myDropdown" class="dropdown-content">
Home2
About2
Contact2
I don't edit anything inside the tag and tag so I click Run on link to see the result.
Only the first dropdown menu (the original one) can show the menu, the other two dropdown menu do not show anything.
I guess the reason is the second dropdown menu and the third dropdown menu do not have proper content inside the and tag.
So I start to modify the code in and tag.
Here is the full code the I added for the second dropdown and the third dropdown menu.
<!DOCTYPE html>
<html>
<head>
<style>
/*1st dropdown*/
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
/*2nd dropdown*/
.dropbtn2 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn2:hover, .dropbtn2:focus {
background-color: #3e8e41;
}
.dropdown2 {
position: relative;
display: inline-block;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content2 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown2 a:hover {background-color: #f1f1f1}
.show2 {display:block;}
/*3rd dropdown*/
.dropbtn3 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn3:hover, .dropbtn2:focus {
background-color: #3e8e41;
}
.dropdown3 {
position: relative;
display: inline-block;
}
.dropdown-content3 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content3 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown3 a:hover {background-color: #f1f1f1}
.show3 {display:block;}
</style>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
1st dropdown
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
2nd dropdown
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">Dropdown2</button>
<div id="myDropdown2" class="dropdown-content2">
Home2
About2
Contact2
</div>
</div>
3rd dropdown
<div class="dropdown3">
<button onclick="myFunction3()" class="dropbtn3">Dropdown3</button>
<div id="myDropdown3" class="dropdown-content3">
Home3
About3
Contact3
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
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('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
//for 2nd dropdown
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show2");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show2')) {
openDropdown.classList.remove('show2');
}
}
}
}
//for 3rd dropdown
function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show3");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn3')) {
var dropdowns = document.getElementsByClassName("dropdown-content3");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show3')) {
openDropdown.classList.remove('show3');
}
}
}
}
</script>
</body>
</html>
When I run the code, all buttons can open the dropdown menu when clicked. However, when I click outside of the dropdown menus, only the third button can close the dropdown menu, the first and the second button still open the dropdown menu.
Here are my questions.
Copy another two sets of code for create another two dropdown menu seems not a good practice as the code will become messy, not good for debug and even if there is an update, I have change the code multiple times.
However, if don't copy another two sets of code, the other two dropdown menu will not work.
Even I copy another two sets of code for create another two dropdown menu, I don't understand the dropdown menus do not close when the mouse click outside of them.
Grateful for your advice please. Thank you.
You are overriding three times window.onclick event function. Only the last function launches. If you combine the three functions in one, it works.
Your code now:
<!DOCTYPE html>
<html>
<head>
<style>
/*1st dropdown*/
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
/*2nd dropdown*/
.dropbtn2 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn2:hover, .dropbtn2:focus {
background-color: #3e8e41;
}
.dropdown2 {
position: relative;
display: inline-block;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content2 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown2 a:hover {background-color: #f1f1f1}
.show2 {display:block;}
/*3rd dropdown*/
.dropbtn3 {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn3:hover, .dropbtn2:focus {
background-color: #3e8e41;
}
.dropdown3 {
position: relative;
display: inline-block;
}
.dropdown-content3 {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content3 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown3 a:hover {background-color: #f1f1f1}
.show3 {display:block;}
</style>
</head>
<body>
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
1st dropdown
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
2nd dropdown
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">Dropdown2</button>
<div id="myDropdown2" class="dropdown-content2">
Home2
About2
Contact2
</div>
</div>
3rd dropdown
<div class="dropdown3">
<button onclick="myFunction3()" class="dropbtn3">Dropdown3</button>
<div id="myDropdown3" class="dropdown-content3">
Home3
About3
Contact3
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
//for 2nd dropdown
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show2");
}
//for 3rd dropdown
function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show3");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show2')) {
openDropdown.classList.remove('show2');
}
}
}
if (!event.target.matches('.dropbtn3')) {
var dropdowns = document.getElementsByClassName("dropdown-content3");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show3')) {
openDropdown.classList.remove('show3');
}
}
}
}
</script>
</body>
</html>