Javascript 调整下拉菜单位置_Javascript_Html_Css_Twitter Bootstrap

Javascript 调整下拉菜单位置

javascript html css twitter-bootstrap

Javascript 调整下拉菜单位置,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我正在使用javascript代码创建一个列表，该列表应该是下拉菜单，我成功地创建了，但是，我无法将其放置在通知图标的正下方 HTML 此外，当我在显示下拉菜单后单击“离开”时，它会隐藏，但当我再次显示并单击“离开”时，它不会再隐藏，这是为什么？请使用图像链接和fontasome cdn尝试以下代码，并让我知道。我也对你的风格做了一些小改动正文 { 字体系列：Arial、Helvetica、无衬线字体； /*背景色：#ABB1BA*/ } /*设置导航栏的样式*/ navbar先生 { 宽度

我正在使用javascript代码创建一个列表，该列表应该是下拉菜单，我成功地创建了，但是，我无法将其放置在通知图标的正下方

HTML

此外，当我在显示下拉菜单后单击“离开”时，它会隐藏，但当我再次显示并单击“离开”时，它不会再隐藏，这是为什么？

请使用图像链接和fontasome cdn尝试以下代码，并让我知道。我也对你的风格做了一些小改动

正文
{
字体系列：Arial、Helvetica、无衬线字体；
/*背景色：#ABB1BA*/
}
/*设置导航栏的样式*/
navbar先生
{
宽度：100%；
背景色：#07716E；
身高：2%；
显示器：flex；
对齐项目：居中；
页边距底部：未设置！重要；
填充：10px；
}
/*导航栏链接*/
纳瓦尔先生
{
浮动：左；
文字装饰：无；
颜色：#中交；
}
.文本
{
字体系列：草书；
字体大小：粗体；
}
.图标容器
{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
位置：绝对位置；
右：0；
}
.图标容器a{
利润率：0px 10px；
}
.调整其他图标
{
}
.法·法·贝尔
{
字体大小：120%；
}
.fa.fa-user-circle、.glyphicon.glyphicon-log-out
{
字体大小：120%；
}
/*名单*/
保险商实验室
{  
位置：绝对位置；
背景色：#f1f1；
宽度：12%；
高度：自动；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1
}
锂
{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.myListClass{
边缘顶端：33像素；
填充：未设置；
宽度：50px；
右：60px；
}
/*添加响应-将在小于500像素的屏幕上自动垂直显示导航栏，而不是水平显示*/
@媒体屏幕和屏幕（最大宽度：500px）{
纳瓦尔先生{
浮动：无；
显示：块；
}
}


函数myFunction（x）
{
x、 切换（“fa-bell斜杠”）；
}
函数showNotifications（）{
//建立用作列表数据源的数组
var listData=[
“A”，
“B”，
“C”
//通知数组
];
//为列表创建一个容器元素
var listContainer=document.createElement（'div'）；
//div.setAttribute（'id'，'divList'）；
//将其添加到页面中
document.getElementById（'dropdown'）.appendChild（listContainer）；
//上榜
var listeElement=document.createElement（'ul'）；
//ul.setAttribute（'id'，'ulList'）；
//document.getElementsByTagName（“ul”）[0].setAttribute（“id”，“ulID”）；
liselement.id=“myListID”；
添加（“myListClass”）；
//将其添加到页面中
appendChild（listElement）；
//设置一个循环，每次遍历listItems中的项目
var numberOfListItems=listData.length；
对于（变量i=0；i

请使用您的图像链接和fontasome cdn尝试以下代码，然后告诉我。我也对你的风格做了一些小改动

正文
{
字体系列：Arial、Helvetica、无衬线字体；
/*背景色：#ABB1BA*/
}
/*设置导航栏的样式*/
navbar先生
{
宽度：100%；
背景色：#07716E；
身高：2%；
显示器：flex；
对齐项目：居中；
页边距底部：未设置！重要；
填充：10px；
}
/*导航栏链接*/
纳瓦尔先生
{
浮动：左；
文字装饰：无；
颜色：#中交；
}
.文本
{
字体系列：草书；
字体大小：粗体；
}
.图标容器
{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
位置：绝对位置；
右：0；
}
.图标容器a{
利润率：0px 10px；
}
.调整其他图标
{
}
.法·法·贝尔
{
字体大小：120%；
}
.fa.fa-user-circle、.glyphicon.glyphicon-log-out
{
字体大小：120%；
}
/*名单*/
保险商实验室
{  
位置：绝对位置；
背景色：#f1f1；
宽度：12%；
高度：自动；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1
}
锂
{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.myListClass{
边缘顶端：33像素；
填充：未设置；
宽度：50px；
右：60px；
}
/*添加响应-将在小于500像素的屏幕上自动垂直显示导航栏，而不是水平显示*/
@媒体屏幕和屏幕（最大宽度：500px）{
纳瓦尔先生{
浮动：无；
显示：块；
}
}


函数myFunction（x）
{
x、 切换（“fa-bell斜杠”）；
}
函数showNotifications（）{
//建立用作列表数据源的数组
var listData=[
“A”，
“B”，
“C”
//通知数组
];
//为列表创建一个容器元素
var listContainer=document.createElement（'div'）；
//div.setAttribute（'id'，'divList'）；
//将其添加到页面中
document.getElementById（'dropdown'）.appendChild（listContainer）；
//上榜
var listeElement=document.createElement（'ul'）；
//ul.setAttribute（'id'，'ulList'）；
//document.getElementsByTagName（“ul”）[0].setAttribute（“id”，“ulID”）；
liselement.id=“myListID”；
添加（“myListClass”）；
//将其添加到页面中
appendChild（listElement）；
//设置一个循环，一次遍历listItems中的项
<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>

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;
  }
}