Question

我已阅读了这些教程，并完成了其他帖子太。我创建了一个页面，在侧栏上我创建了一个名为“Drop Down”的列表项，我想点击它打开一个下拉列表并根据它进行编码。但问题是下拉列表没有到来。我真的没有得到确切的问题。

任何帮助都将不胜感激。

下面的代码和代码段

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

$('.bxslider').bxSlider({
  buildPager: function(slideIndex){
    switch(slideIndex){
      case 0:
        return '<img src="2012 Outdoor Classic @ Ivor Winn Stadium.jpg">';
      case 1:
        return '<img src="3rd.jpg">';
      case 2:
        return '<img src="bxDP8.png">';
    }
  }
});

@import url("https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css")
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }   
body {
  font-family: 'Open Sans';

  background-image: url("/home/kamna/admin page/bubble_f2.jpg");
} 
a {
  text-decoration: none;
}


div#header {
  width: 500%;
  height: 50px;

  margin: 0 auto;
}

.logo {

  margin-top: 50px;
  margin;left:15px;
  margin: 0 auto;
}


.logo a {
  font-size: 1.6em;
  color: #000;
}

.logo a span {
  font-weight: 300;
}

div#container {
  width:100%;
  margin: 0 auto;

}

.sidebar {
  width: 250px;
  height: 100%;
  background-color: #171717;
  float: left;
  color:#fff; /* change to whatever you want */
}
.content {
  width: auto;
  margin-left:250px;
  height: 500px;
  backgroud-color: #008000;
  color: #000;
  padding: 15px;
}



.content p {
  width:auto;
  font-size :0.73em;


}

}


div#box {
  margin-top:15px;
  display: inline-block;
}

div#box .box-top {
  color:#fff;
  text-shadow:0px 0px 1px #000;
  background-color: #2980b9;
  padding:5px;
  padding-left:15px;
  font-weight: 300;
}

div#box .box-panel {
  padding:15px;
  background-color: #fff;
  color:#333;
}


ul#nav {

}

ul#nav li {
  list-style: none;

}

ul#nav li a {
  color: #ccc;
  display: block;
  padding: 10px;
  font-size: 0.8em;
  border-bottom: 1px solid #0A0A0A;
  -webkit-transition: 0.2s;
  -moz-transition:0.2s;
  -o-transition:0.2;
  transition:0.2s;
}

ul#nav li a:hover {
  background-color: #030303;
  color: #fff;
  padding-left:30px;
}


ul#nav li a.selected{
  background-color: #030303;
  color:#fff;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

#center {
  margin:0px auto;
  width:960px; 
  height:auto;
  border:5px solid black;
  padding:10px;

}

#One {
  margin-right: 0px;

}

#Two {
  margin-left: 20px;
  border:1px solid blue;
}
#Three {
  margin-left: 20px;
  border:1px solid blue;
}
#Four{
  margin-left: 20px;
  border:1px solid blue;
}

a.mobile{
  display block;
  color:#fff;
  background-color:#000;
  text-align: center;
  padding:7px;
  border-bottom:1px #fff;


}

a.mobile: active{
  background-color:#4a4a4a;
}

<html>
  <head>
    <title> SpaceCar </title>
    <link rel="stylesheet" type="text/css" href="styles/global.css"/> 
    <meta name="viewport" content="width=device-width, initial-scale:1.0, user-scalable=0" />
    <script src="scripts/jquery-1.12.3.min.js"></script>
    <script src="srcipts/general.js"></script>
  </head>

  <body>
    <div id="header"> 
      <div class="logo"> <a href="#">Space<span>Run
        </span></a></div>
    </div> 
    <a class="mobile">MENU</a>
    <div id="container">
      <div class="sidebar">
        <ul id="nav">
          <li><a class="selected" href="#">Dashboard</a></li>
          <li><a href="#">Maruti</a></li>
          <li><a href="#">Hyundai</a></li>
          <li><a href="#">RangeRover</a></li>
          <li><a href="#">Audi</a></li>
          <li><a href="#">Purchases</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown</a>
            <div class="dropdown-content" id="myDropdown">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
            </div>
          </li>
        </ul>
        <!--<button onclick="addimage();"> Click</button>-->
      </div>


      <div class="content">
        <h1>Dashboard</h1>
        <p> alright this is your dashboard</p>
        <div id="box">
          <div class="box-top">News</div>
          <div class="box-panel">
            this is some simple news ikdnksnd
          </div>
        </div>
        <div id="box">
          <div class="box-top">News</div>
          <div class="box-panel">
            what is idshfknsdkjfnjsdnkfnsdn
          </div>
        </div>
        <div id="box">
          <div class="box-top">News</div>
          <div class="box-panel">
            o i really khdkasndksnk is o asdjbaskjbdkasbdmaskdbas 
          </div>
        </div>
        <div id="center">
          <img src="images (1).jpg" style="width:150px;height:150px" id="One"/>
          <img src="fisker-karma.jpg" style="width:189px;height:170px" id="Two"/>
          <img src="images.jpg" style="width:150px;height:150px" id="Three"/>
          <img src="aaaaaaaaaaaaaaaa.jpg" style="width:150px;height:150px" id="Four"/>
        </div>
      </div>
      </body>
    </html>

Answer 1

你放了一个＆＃34;，＆＃34;而不是＆＃34;。＆＃34;这里

$(".sidebar").slideToggle('fast');

Working example

你也忘了在JSFiddle中包含jQuery库。

想要添加下拉列表

1 个答案: