How do I change this element from a hover to a click effect using jQuery?

Question

The jQuery code I'm using on my HTML isn't working. I want the "dropbtn" to be clicked on to display it's hidden contents instead of being hovered on. I tried removing all "hover" effects on CSS but the jQuery code still wouldn't work. The jQuery works fine on other codes except this one. How can I fix this?

$("dropdown-content").toggle(); should be $(".dropdown-content").toggle(); — Armin
– Armin, Commented Mar 8, 2017 at 16:14
You code is not available ,after getting the solution you have remove your code .Wrong practice . — UJS
– UJS, Commented Apr 19, 2017 at 4:20
UJS 6 Hi, sorry about that! My code is used for something important so I removed it. I didn't think I wasn't allowed to do that. Is there a reason why I shouldn't remove it? — confused5000
– confused5000, Commented Apr 19, 2017 at 4:29

Rory McCrossan · Accepted Answer · 2017-03-08 16:16:45Z

1

Your jQuery code was almost correct, you were just missing the . prefix on the class selectors.

To make the styling work in the same manner you simply need to remove the :hover rules from your CSS and instead use a class selector which you toggle on successive clicks of the .dropbtn element. In the example below I used active. Try this:

$(document).ready(function() {
  $(".dropbtn").click(function() {
    $(this).toggleClass('active');
    $(".dropdown-content").toggle();
  });
});

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

.dropbtn {
  width: 115px;
  height: 28px;
  border: solid 1px #cebbb1;
  background-color: white;
  color: #897f63;
  margin-left: -5px;
  position: relative;
  cursor: pointer;
}

.dropbtn.active {
  border: solid 1px #0093dc;
  color: #0093dc;
}

#mainspan {
  font-weight: bold;
  position: absolute;
  padding-left: 7px;
  padding-top: 4px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  z-index: 1;
  border: solid 1px #cebbb1;
  width: 170px;
  margin-left: -5px;
}

.dropdown-content a {
  padding: 1px 14px;
  display: block;
  color: #897f63;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
  text-decoration: none;
  color: #897f63;
}

<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="DROPDOWN.css">
</head>
<body>
  <div class="dropdown">
    <div class="dropbtn">
      <span id="mainspan">main</span>
    </div>
    <div class="dropdown-content">
      <a href="#">item 1</a>
      <a href="#">item 2</a>
    </div>
  </div>
  <script type='text/javascript' src="DROPDOWN.js"></script>
</body>
</html>

answered Mar 8, 2017 at 16:16

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

confused5000 Over a year ago

Yes, thank you this fixed it! It seems like I was just missing a lot of things on my codes. But thank you very much for the help, it's greatly appreciated!

Armin Over a year ago

@confused5000 If this question resolved your issue, you should accept it.

confused5000 Over a year ago

@Armin Just did, I didn't know how to do that earlier. Thanks for the reminder!

DeclanPossnett · Accepted Answer · 2017-03-08 16:16:53Z

0

To refer to a class in JQuery, you need to include a . before the class name:

$(".dropbtn").click(function(){
    $(".dropdown-content").toggle();
});

answered Mar 8, 2017 at 16:16

DeclanPossnett

3761 gold badge5 silver badges13 bronze badges

Collectives™ on Stack Overflow

How do I change this element from a hover to a click effect using jQuery?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related