调整下拉菜单位置

时间：2019-04-30 03:45:00

标签： javascript html css twitter-bootstrap

我正在使用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;
  }
}

同样，当我在显示下拉菜单后单击鼠标左键时，它被隐藏，但是当我再次显示鼠标左键并单击时，它不再被隐藏，为什么？

1 个答案:

答案 0 :(得分：0)

请尝试使用下面的代码以及您的图像链接和fontasome cdn，让我知道。我也对您的样式进行了较小的更改

body
 {
  font-family: Arial, Helvetica, sans-serif;
  /* background-color: #ABB1BA; */
 }

/* Style the navigation bar */
.navbar
{
  width: 100%;
  background-color: #07716E;
  height: 2%;
  display: flex;
  align-items: center;
  margin-bottom: unset !important;
  padding: 10px;
}

/* Navbar links */
.navbar a
{
  float: left ;
  text-decoration: none;
  color: #CCCCCC;  

}
.text
{
  font-family: cursive;
  font-weight: bold;
}
.icons-container
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    right: 0;
}
.icons-container a{
    margin: 0px 10px;
}
.adjustOtherIcons
{

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

  }

.myListClass{
    margin-top: 33px;
    padding: unset;
    width: 50px;
    right: 60px;
}



/* 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;
  }
}
<html>
<head>
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <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>
<div class="navbar">
  <a  href="#" class="text"> <img src="https://picsum.photos/30/26" alt="logo" width="30px" height="26px"> Scramblez </a> 
 
  <div class="icons-container">
    <div id="dropdown">
        <a class="icons"> <i onclick="myFunction(this), showNotifications()" class="fa fa-bell" ></i></a> 
    </div>
    <a class="adjustOtherIcons"> <i class=" fa fa-user-circle"> </i></a>  
    <a class="adjustOtherIcons"> <span class="glyphicon glyphicon-log-out"></span> </a> 
  </div>
</div> 
  <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.getElementById('dropdown').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>
</html>

相关问题
最新问题