Menu
Here is my HTML code.
<dl id="sample" class="dropdown">
<dt><a href="#"></a></dt>
<dd>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Advisory</a></li>
<li><a href="#">People</a></li>
<li><a href="#">Universities</a></li>
<li><a href="#">HR Intellegence</a></li>
<li><a href="#">Companies</a></li>
<li><a href="#">Inbox</a></li>
<li><a href="#">Notifications</a></li>
</ul>
</dd>
And this is js
$(document).ready(function() {
$(".dropdown img.flag").addClass("flagvisibility");
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
$("#flagSwitcher").click(function() {
$(".dropdown img.flag").toggleClass("flagvisibility");
});
});
This is a code for a drop down list that populates on click. I want to repeat it 100 times on my webpage and I don't want to copy the code and change the Class Name or ID for each entry. I remember there is some '.this' type function to do this but I don't know how to use it. Also I have some dynamic posts which contain this list so its JS can't be repeated on every single new entry.
Please suggest such changes in this code which will allow me to use '.dropdown' class with every entry without repeating the JS code and it opens only that drop down which is clicked to open.
831
asked Aug 03 '26 03:08
I made something for you:
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-family: sans-serif;
}
.dropdown {
display: inline-block;
}
.dropdown dd {
display: none;
box-shadow: 0px 0px 2px 0px #555;
width: 180px;
position: absolute;
margin-left: 1px;
margin-top: 1px;
background-color: #FFF;
}
.dropdown ul {
list-style: none;
padding-left: 0px;
}
dt a {
display: inline-block;
background-color: #1b8be0;
padding: 10px;
color: #FFF;
text-decoration: none;
}
.dropdown li a{
text-decoration: none;
color: #333;
}
.dropdown li {
padding: 6px;
cursor: pointer;
}
.dropdown li:hover{
background-color: #EEE;
padding: 6px;
}
</style>
</head>
<body>
<dl id="sample" class="dropdown">
<dt><a href="#">Menu</a></dt>
<dd>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Community</a></li>
</ul>
</dd>
</dl>
<dl id="sample-2" class="dropdown">
<dt><a href="#">Menu 2</a></dt>
<dd>
<ul>
<li><a href="#">More News</a></li>
<li><a href="#">More Jobs</a></li>
<li><a href="#">More Community</a></li>
</ul>
</dd>
</dl>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(".dropdown dt a").click(function(e){
$(this).parent().next().fadeToggle("fast");
});
$(".dropdown dt a").blur(function(e){
if ($(e.target).not(".dropdown ul")){
$(".dropdown dd").fadeOut();
}
});
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With