CODEWITHSUNDEEP
javascriptcss
covgdn
covgdn

Reputation: 35

Span tag braking button action

I have a simple dropdown menu on a page. Clicking it triggers a JavaScript function. Code here:

function myBrandDropdown() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu 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: transparent;
  padding: 10px;
  font-size: 1.4rem;
  border: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  cursor: pointer;
}


/* Dropdown button on hover*/

.dropbtn:hover {
  border: none;
  text-decoration: none;
}


/* Dropdown button on focus */

.dropbtn:focus {
  background-color: #293241;
  border: none;
  text-decoration: none;
  color: #fff;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #293241;
  min-width: 160px;
  color: #fff;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: #fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

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


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}
<div class="dropdown">
  <button onclick="myBrandDropdown()" class="dropbtn">
          Brand name &#9662;
        </button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Up to this point everything works fine.

However I wanted to add some underline styling to the text within the button, but with more control than a simple underline text decoration. So I wrapped the text in a span, and gave that the style I wanted. See here:

Updated HTML

<div class="dropdown">
        <button onclick="myBrandDropdown()" class="dropbtn">
          <span class="dropbtnunderline">Brand name</span>
          &#9662;
        </button>
        <div id="myDropdown" class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>

New CSS

.dropbtnunderline {
  display: inline-block;
  border-bottom: 3px solid #e63946;
  padding-bottom: 2px;
  padding-top: 5px;
}

Since adding the span, the button no longer triggers correctly. It looks exactly as I wanted, and clicking the space around the text triggers correctly, but clicking on the text itself does nothing.

What is it that's caused this, and can I easily fix it?

Upvotes: 0

Views: 33

Answers (1)

Chaosxmk
Chaosxmk

Reputation: 745

The simplest possible solution would be to add pointer-events: none as a style to the span.

Upvotes: 1

Related Questions