How to change an Icon when a div open/hide
Question
$(document).ready(function(){ $("a.dropdown-link").click(function(e) { e.preventDefault(); var $div = $(this).next('.dropdown-container'); var $icon = $(this).next('.icons'); $(".dropdown-container").not($div).hide(); if ($div.is(":visible")) { $.hide(); } else { $div.show(); } $("span.icons").not($icon).show(); if ($icon.is(":visible")) { $.hide(); } else { $(".icons").text('-'); } }); $(document).click(function(e){ var p = $(e.target).closest('.dropdown__dlk').length if (!p) { $(".dropdown-container").hide(); $(".icons").text('+'); } }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box__dlk--dropdown"> <div id="dropdown__dlk-1" class="dropdown__dlk dropdown-processed"> <a class="dropdown-link" href="#">GRUPO DE INFORMAÇÂO <span class="icons">+</span></a> <div class="dropdown-container" style="display: none;"> chamada 01 </div> </div> <div id="dropdown__dlk-2" class="dropdown__dlk dropdown-processed"> <a class="dropdown-link" href="#">AVALIAÇÃO <span class="icons">+</span></a> <div class="dropdown-container" style="display: none;"> chamada 02 </div> </div> <div id="dropdown__dlk-3" class="dropdown__dlk dropdown-processed"> <a class="dropdown-link" href="#">TABELA DE MEDIDAS <span class="icons">+</span></a> <div class="dropdown-container" style="display: none;"> chama 03 </div> </div> </div>
When I click to open another div, the icon - doesn't back for , only when i click outside. I don't understand much of JS and Jquery, and if possible, chan explain me what it's wrong ? This is an update for my last question
2 answers
solution1
1 ACCPTED 2019-08-15 23:53:40
I have cleaned up your code a bit.
- Since
spanhaving classiconsis not a sibling of the link,next()won't work. Usedchildren()and took the first one. - In the save show/hide logic included the icon text change as well.
- Removed the unnecessary even handler block at the end
Here is the running code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Click Events</title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box__dlk--dropdown"> <div id="dropdown__dlk-1" class="dropdown__dlk dropdown-processed"> <a class="dropdown-link" href="#">GRUPO DE INFORMAÇÂO <span class="icons">+</span></a> <div class="dropdown-container" style="display: none;"> chamada 01 </div> </div> <div id="dropdown__dlk-2" class="dropdown__dlk dropdown-processed"> <a class="dropdown-link" href="#">AVALIAÇÃO <span class="icons">+</span></a> <div class="dropdown-container" style="display: none;"> chamada 02 </div> </div> <div id="dropdown__dlk-3" class="dropdown__dlk dropdown-processed"> <a class="dropdown-link" href="#">TABELA DE MEDIDAS <span class="icons">+</span></a> <div class="dropdown-container" style="display: none;"> chama 03 </div> </div> </div> <script> $(document).ready(function () { $("a.dropdown-link").click(function (e) { e.preventDefault(); var $div = $(this).next('.dropdown-container'); var $icon = $(this).children('.icons').first(); $(".dropdown-container").not($div).hide(); $(".icons").not($icon).text('+'); if ($div.is(":visible")) { $div.hide(); $icon.text('+'); } else { $div.show(); $icon.text('-'); } }); }); </script> </body> </html>
Note: Depending on how you display (span, image, CSS, etc.) and where you place (sibling, child, etc.) the icon related stuff, change the above code a little bit to make it work.
solution2
0 2019-08-15 22:19:01
You could include a div in your dropdown-link that uses background-image: url(icon.png) and fixed width and height values to show an image and then have css apply transform: rotate(180deg); or replace the image whenever the parent has the DropDownStyle class.
Example:
HTML
<div id="dropdown__dlk-1" class="dropdown__dlk dropdown-processed">
<a class="dropdown-link" href="#">GRUPO DE INFORMAÇÂO <div class="icon"></div></a>
<div class="dropdown-container" style="display: none;">
chamada 01
</div>
</div>
CSS
div.dropdown__dlk div.icon {
background-image: url(icon.png);
width: 16px;
height: 16px;
}
div.dropdown__dlk.DropDownStyle div.icon {
transform: rotate(180deg);
/* alternatively replace image */
background-image: url(icon2.png);
}
JS apply DropDownStyle to whole .dropdown-dlk
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide();
$(this).addClass('DropDownStyle');
} else {
$div.show();
$(this).addClass('DropDownStyle');
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown__dlk').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
Note: That's how I would do it, but it's probably not the best solution. Also I didn't check my code so it might not work
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.