时间戳

首页 > 解决方案 > 轮播使下拉菜单停止工作

javascript - 轮播使下拉菜单停止工作

问题描述

我正在制作一个带有标题的非常基本的页面，最后一个选项作为下拉菜单的小导航，以及一个引导轮播插件。由于我添加了轮播，下拉菜单不起作用。

通过制作这个页面，我对编码和学习比较陌生。下拉菜单应来自“收藏”链接以及其他 2 个选项。

轮播的代码是从 w3school.com 编辑的，我尝试更改边距，使其不会与我的下拉菜单重叠，但没有运气。想知道我正在使用的 jquery 链接是否有问题，或者我是否遗漏了代码中的某些内容？我在下面删除了一些内容，因此没有对我认为不相关的内容（.main、.active、.drop-down 容器等）进行过多排序，但如果我需要在此处重新包含它们，请让我知道。

任何帮助将不胜感激！非常感谢。

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.3.7/js/bootstrap.min.js"> 
 </script>
 </head>

<body>

<style>   

#header {
text-align: left;
color: #294ccf;
position: absolute;
width: 300px;
height: 100px;
padding-left: 20px;}

h1  {
color: #294ccf;
font-family: arial;
font-weight: bold;
position:fixed;
font-size: 18pt;
text-decoration: none;
text-align: left}


.sidenav {
height: 100%;
width: 200px;
position: fixed;
top: 0;
left: 0;
    background-color: ;
overflow-x: hidden;
padding-top: 0px;
margin-top: 90px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
color: #294CCF;
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 12pt;
text-align: left;
text-decoration: none;}


.sidenav a, .dropdown-btn {
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 12pt;
color: #294CCF;
display: block;
border: none;
background: none;
width: 100%;
cursor: pointer;
outline: none;
position: relative;
font-style: normal;
font-weight: bold;
text-align: left;
line-height: normal;}


.fa-caret-down {
    float: right;
    padding-right: 8px;
    color: #294CCF; }

.carousel {margin-left 100px;
    margin-top:180px;}

.carousel-control.left, .carousel-control.right {
    background-image: none}


</style>


 <div id="header">
      <h1>Robyn Smith<br>Jewellery + objects</h1>
    </div>

<div class="sidenav">
<a href="bio.html">Bio</a>
<a href="portfolio.html">Portfolio</a>

<button class="dropdown-btn">Collections
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="sportsday.html">Sports Day</a>
<a href="artefacts.html">Putin</a>
</div></div>


<div class="container">

<div id="myCarousel" class="carousel" >
<!-- Wrapper for slides -->
<div class="carousel-inner">
  <div class="item active">
    <img src="img/sportsday1.jpg" alt="Badges" style="width:100%;">
  </div>

  <div class="item">
    <img src="img/sportsday2.jpg" alt="Bag" style="width:100%;">
  </div>

  <div class="item">
    <img src="img/sportsday3.jpg" alt="Neckpiece" style="width:100%;">
   </div>
 </div>

 <!-- Left and right controls -->
 <a class="left carousel-control" href="#myCarousel" data-slide="prev">
  <span class="carousel-control-prev-icon" ></span>
  <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
  <span class="carousel-control-next-icon" ></span>
  <span class="sr-only">Next</span>

  </a>

  </div>
 </div>

 <script>
 //* Loop through all dropdown buttons to toggle between hiding and showing its 
 dropdown content - This allows the user to have multiple dropdowns without any 
 conflict */
 var dropdown = document.getElementsByClassName("dropdown-btn");
 var i;

 for (i = 0; i < dropdown.length; i++) {
 dropdown[i].addEventListener("click", function() {
 this.classList.toggle("active");
 var dropdownContent = this.nextElementSibling;
 if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
  }

  </script>
</body>

标签： javascriptjqueryhtmlcsscarousel

解决方案

The script in your body has a comment which is opened incorrectly. Comments in javascript can be:

  • Single line: // This is a single line comment
  • Multi line: /* This is a multi line comment */

Your code has the following line which breaks the application: //* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */

The compiler now only recognises this as a single line comment because of the // at the start, thus the rest of the code won't work anymore. The compiler now tries to interpret the lines such as "dropdown content - ..." as javascript, which is isn't. Remove the first slash to make it a multi line comment and your code should be fixed!

推荐阅读