【发布时间】：2019-04-30 14:35:17
【问题描述】：
我正在使用 javascript 代码创建一个列表，该列表应该是下拉菜单，我成功创建了，但是我无法将它定位在通知图标的正下方
HTML
<html>
<!-- Head -->
<head>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
-->
</head>
<!-- Body -->
<body>
<div class="navbar">
<a href="#" class="text"> <img src="logo.png" alt="logo" width="30px" height="26px"> Scramblez </a>
<a class="icons"> <i onclick="myFunction(this), showNotifications()" class="fa fa-bell" ></i> </a>
<a class="adjustOtherIcons"> <i class=" fa fa-user-circle"> </i> </a>
<a class="adjustOtherIcons"> <span class="glyphicon glyphicon-log-out"></span> </a>
</div>
<!-- Javascript code -->
<script>
function myFunction(x){
x.classList.toggle("fa-bell-slash");
}
function showNotifications(){
// Establish the array which acts as a data source for the list
var listData = [
'A',
'B',
'C'
//Array for notifications
];
// Make a container element for the list
var listContainer = document.createElement('div');
//div.setAttribute('id','divList');
// Add it to the page
document.getElementsByTagName('body')[0].appendChild(listContainer);
// Make the list
var listElement = document.createElement('ul');
//ul.setAttribute('id','ulList');
//document.getElementsByTagName("ul")[0].setAttribute("id", "ulID");
listElement.id = "myListID";
listElement.classList.add("myListClass");
// Add it to the page
listContainer.appendChild(listElement);
// Set up a loop that goes through the items in listItems one at a time
var numberOfListItems = listData.length;
for (var i = 0; i < numberOfListItems; ++i) {
// create an item for each one
var listItem = document.createElement('li');
// Add the item text
listItem.innerHTML = listData[i];
// Add listItem to the listElement
listElement.appendChild(listItem);
}
}
window.onclick = function(event) {
if (!event.target.matches('.fa.fa-bell')) {
var hide = document.getElementById("myListID");
hide.style.display = 'none';
}
}
</script>
</body>
<!-- Closing of html tag -->
</html>
CSS：
body
{
font-family: Arial, Helvetica, sans-serif;
/* background-color: #ABB1BA; */
}
/* Style the navigation bar */
.navbar
{
width: 100%;
background-color: #07716E;
height: 2%;
}
/* Navbar links */
.navbar a
{
float: left ;
text-decoration: none;
color: #CCCCCC;
}
.text
{
padding-top: 10px;
font-family: cursive;
font-weight: bold;
padding-left: 5px;
}
.icons
{
padding-top: 14px;
padding-left: 77%;
}
.adjustOtherIcons
{
padding-top: 14px;
padding-left: 4%;
}
.fa.fa-bell
{
font-size: 120%;
}
.fa.fa-user-circle, .glyphicon.glyphicon-log-out
{
font-size: 120%;
}
/* List */
ul
{
position: absolute;
background-color: #f1f1f1;
width: 12%;
height: auto;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
li
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
另外，当我在显示下拉菜单后点击离开时，它会被隐藏，但是当我再次显示并点击离开时，它不再隐藏了，这是为什么呢？
【问题讨论】：
-
使用引导程序 3？
-
是的，我正在使用它
标签： javascript html css twitter-bootstrap