populate a drop down menu list
发布于2023-11-12 16:49 阅读(271) 评论(0) 点赞(9) 收藏(5)
I have the following [fiddle][1]. I am trying to achieve two things & I have fallen at the first hurdle.
I want to have a drop down menu that when hovered over display a list of regions. The hover over part works however none of the regions are listed. I think its to do with the code below. However I'm not sure what is wrong? In my actual project I use an AJAX call to populate the menu but would like to know what is wrong with the code below?
The end goal is where one of the regions is clicked on a javascript function will be called
$(document).ready(function () {
var $region = $('#regionList');
$region.append('<li><a>Europe</a></li>');
$region.append('<li><a>Japan</a></li>');
$region.append('<li><a>North America</a></li>');
}) /* Dropdown Button */
.dropbtn {
background-color: #9FACEC;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
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 on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #4C66E9;}<div class="dropdown">
<button class="dropbtn">Regions</button>
<div class="dropdown-content">
<ul id="regionList"></ul>
</div>
</div>解决方案
jQuery is not defined, you'll need to include jQuery if you want to use $.
$ is not defined
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/532553/b67cd6fae156caa81920/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力