Javascript раскрывающееся меню не работает должным образом в Navbar - PullRequest
Новая
       6

Javascript раскрывающееся меню не работает должным образом в Navbar

1 голос
/ 14 января 2020

Я новичок и пытаюсь реализовать раскрывающееся меню на панели навигации, используя javascript. Для этой цели я использовал пример w3school, показанный здесь: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click, но он не работает. Навабар работает хорошо, но выпадающий - нет. 

function lmyDropdown(){
  document.getElementById("myDropdown").classList.toggle("show");
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
  }
  }
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}
 .navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0px;
}

.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color: DodgerBlue;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index:1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

.center{
   text-align: center;
   color:white;
}
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}
.btn:hover {
  background-color: RoyalBlue;
}
input[type=text] {
  width: 15%;
  margin: 10px 10px;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
input[type=number] {
  width: 15%;
  margin: 10px 10px;
  box-sizing: border-box;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
   -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
 }
input[type=button] {
  width: 5%;
  margin: 10px 3px;
  box-sizing: border-box;
}

input[type=text]:focus {
  background-color: lightblue;
  width: 30%;
}
input[type=number]:focus {
  background-color: lightblue;
  width: 30%;
}
#filtersubmit {
  position: relative;
  z-index: 1;
  left: -30px;
  top: 1px;
  color: #7B7B7B;
  cursor: pointer;
  width: 0;
}
select {
  width: 10%;
  padding: 20px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
  bottom:1px;
}
#myTable {
float: left;
width : 40%;
//border: 1px solid black;
 margin: 10px 10px;
}

.header {
  background-color: DodgerBlue;
  padding: 20px;
  text-align: center;
}

#myTable::after {
  content: "";
  display: table;
  clear: both;
}

 .footer {
  background-color: DodgerBlue;
  padding: 10px;
  color:white;
  margin-top:300px;
  position:fixed;
  bottom:0;
  width:100%;
  
}

</style>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  
</head>
<body onload = "storage()">
<div class="header">
   <h1 class="center">Web Site</h1>
</div>
<div class="navbar">
  <a href="#">Home</a>
  <a href="#">News</a>
  <div class="dropdown">
    <button class="dropbtn" onclick="lmyDropdown()">Contact 
      <i class="fa fa-caret-down"></i> 
    </button>
    <div class="dropdown-content" id="myDropdown">
      <a href="# " target="_blank">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
  </div> 
  </div>
  <a href="#" style="float:right">About</a>
</div> 

<br><br><br>
<button onclick ="window.location.href='newsite.html';" class="btn"> <i class="fa fa-home"></i></button>
<select id="mySelect" onchange="myFunction2()">
  <option value="Value1">Value1</option>
  <option value="Value2">Value2</option>
   <option value="Value3">Valu3</option>
</select>
<br><br>
<form>
  Name: <br>
  <input type="text" id="id1" name="fname" placeholder= "Search"> 
  <i id="filtersubmit" class="fa fa-search"></i>
  <p id="demo2" style='color:red;'> </p>
   <p id="demo4" style='color:red;'> </p>
  <br>
  Value:
  <br>
  <input type="number" id="id2" name="fvalue">
  <p id="demo3" style='color:red;'> </p>
  <br><br>
  
  <input type="button" value="add" onclick="appendrow()" > 
  <input type="button" value="delete" onclick="deleterow()">
  <input type="button" value="search" onclick="newappend()">
  <input type="text" id="id3" placeholder= "Search">
   <i id="filtersubmit" class="fa fa-search"></i>
   <input type="text" id="id4" placeholder="Search">
   <i id="filtersubmit" class="fa fa-search"></i>
</form>

<p id="demo1"></p>
<table id ="myTable" class="table table-striped">
  <thead>
    <tr> 
      <th>Name</th>
      <th id="demo"> <span onclick="myFunction()">  </span> </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tizio</td>
      <td>15</td>
    </tr>
    <tr>
      <td>Caio</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Sempronio</td>
      <td>8</td>
  </tbody>
</table>
	<br><br>
	
<div class="footer">
<div class="left">
Alestack - @2020 - all right reserved. [<a href="" title="Credits" style="color:black;">Credits</a>]
  </div>
</div>

Кто-нибудь может мне помочь?

1 Ответ

2 голосов
/ 14 января 2020

Возможно, вы использовали bootstrap и у вас возникла проблема конфликта классов css, в основном вы использовали класс с тем же именем, что и bootstrap one

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...