程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

populate a drop down menu list

发布于2023-11-12 16:49     阅读(208)     评论(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://jsfiddle.net/d2v7fLpj/




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/532553/b67cd6fae156caa81920/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

9 0
收藏该文
已收藏

评论内容:(最多支持255个字符)