Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

javascript - HTML - Dropdown with ahref and button

0 votes
107 views
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

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
  • #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>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...