javascript - HTML - Dropdown with ahref and button

Question

Welcome To Ask or Share your Answers For Others

javascript - HTML - Dropdown with ahref and button

asked Mar 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - HTML - Dropdown with ahref and button

So I am creating a dropdown list with text and a delete button, but I have a small issue. When pressing the ahref link, it redirects perfectly to the website, but when pressing the delete button, it displays the popup message as it should, but then redirect to the ahref link. I don't want it to redirect when pressing the delete button. How can I avoid this?

function myFunction() {
  alert("You clicked the button");
  return;
}

html {
    height: 100%;
}
 
body {
  margin: 0;
  height: 100%;
  font-family: "Poppins", sans-serif;
  background-color: #00ff00;
}

#main-container {
    padding: 16px;
    margin-top: 30px;
}

#navbar {
  /*overflow: hidden;*/
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 54px;
  z-index: 9999;
}

#navbar a.active {
  text-decoration: underline;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.home {
    background-color: green;
}

.dropdown {
  float: left;
 /* overflow: hidden; */
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.deleteBtn {
    float: right;
}

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>

<div id="main-container">

  <div id="navbar" class="navbar">
        <a href="home.php" class="home">Home</a>
        
        <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <!-- Dropdown value below, value is for testing purpose -->
      <a href="https://google.com/">Google
      <button type='deleteBtn' onclick="myFunction()">X</button>
      </a>
      <a href="https://youtube.com/">Youtube
      <button type='deleteBtn' onclick="myFunction()">X</button>
      </a>
      <a href="https://amazon.com/">Amazon
      <button type='deleteBtn' onclick="myFunction()">X</button>
      </a>
    </div>
  </div> 
 </div>
    
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
    
</div>
</body>
</html>

question from:https://stackoverflow.com/questions/65899165/html-dropdown-with-ahref-and-button

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-03-06T05:07:52+0000

#navbar should not be inside #main-container!
Don't place <button> inside <a> and vice-versa.
Use a common parent for both your <a> and <button> instead. (I.e: use an <ul> and <li> list)
type='deleteBtn' is an invalid attribute. Use class instead class='deleteBtn'
Don't use inline on* handlers. JS should be in one place only, and that's your script

Edited CSS and HTML:

function removeListItem(ev) {
  const EL_list = ev.currentTarget.closest("li")
  EL_list.remove();
}

const ELS_deleteBtn = document.querySelectorAll(".deleteBtn");
ELS_deleteBtn.forEach(EL => EL.addEventListener("click", removeListItem));

/*QuickReset*/ * {margin:0; box-sizing:border-box; }

html {height: 100%;}
body {height: 100%; font-family: "Poppins", sans-serif;}

#navbar {
  background-color: #333;
  position: sticky;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

#navbar>a {
  display: block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar .home {
  background-color: green;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown-list {
  padding: 0;
  margin: 0;
}
.dropdown-list li {
  display: flex;
}

.dropdown-list li a {
  padding: 14px 16px;
  flex: 1;
}

.dropdown-list li:hover a {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#main-container {
  padding: 0 20px;
}

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>

<div id="navbar" class="navbar">
  <a href="home.php" class="home">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
    <div class="dropdown-content">
      <ul class="dropdown-list">
        <li>
          <a href="https://google.com/">Google</a>
          <button class='deleteBtn'>X</button>
        </li>
        <li>
          <a href="https://youtube.com/">Youtube</a>
          <button class='deleteBtn'>X</button>
        </li>
        <li>
          <a href="https://amazon.com/">Amazon</a>
          <button class='deleteBtn'>X</button>
        </li>
      </ul>
    </div>
  </div>
</div>

<div id="main-container">
  <h3>Dropdown Menu inside a Navigation Bar</h3>
  <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>

Categories

javascript - HTML - Dropdown with ahref and button

javascript - HTML - Dropdown with ahref and button

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags