这是我的HTML代码。
<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>
这是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");
});
});
这是用于点击时填充的下拉列表的代码。我想在我的网页上重复100次,我不想复制代码并更改每个条目的类名或ID。我记得有一些'.this'类型的功能可以做到这一点,但我不知道如何使用它。此外,我还有一些包含此列表的动态帖子,因此不能在每个新条目上重复其JS。
请在此代码中建议进行此类更改,这样我就可以在不重复JS代码的情况下对每个条目使用“。dropdown”类,并且只打开单击打开的下拉列表。
答案 0 :(得分:1)
我为你做了一些事:
<!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>
答案 1 :(得分:0)
使用Twitter Bootstrap或Zurb Foundation等前端框架会更好。