Question

我正在制作一个非常基本的页面，其中包含标题，带有最后一个选项的小导航（作为下拉菜单）和Bootstrap Carousel插件。由于我添加了轮播，因此下拉菜单不起作用。

通过编写此页面，我在编码和学习方面相对较新。下拉菜单应来自“收藏”链接以及其他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>

Answer 1

您体内的 script 注释未正确打开。 javascript中的注释可以是：

单行： //这是一行注释
多行： / *这是多行注释* /

您的代码包含以下破坏应用程序的行： // *循环浏览所有下拉按钮，以在隐藏和显示其之间切换下拉菜单内容-允许用户进行多个下拉菜单，而无需任何冲突* /

由于开始时的 // ，编译器现在仅将其识别为单行注释，因此其余代码将无法再使用。编译器现在尝试将“下拉内容-...” 等行解释为javascript，事实并非如此。删除第一个斜杠以使其成为多行注释，并且您的代码应固定！

Answer 2

有多个小错误。脚本顺序错误。 Bootrstrap需要jQuery，因此必须放在jQuery之前。您还向Bootstrap CSS链接添加了一些空格，这打破了它。是：

<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://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

该注释仅用于一行，因此也引发了错误。是：

 //* 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 */

固定为：

 /* 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 */

还删除了一些尚未完成的CSS行，只是为了引起您的注意。

<meta name="viewport" content="width=device-width, initial-scale=1">
<script
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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;
        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");

    for (var 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>

Answer 3

首先让我们更正您的CSS代码基本语法错误：

Head：bootstrap.min.css的Href不能分为两行。它必须放在一行上。

Body: line-height: normal, "sans-serif";
.sidenav: background-color: ; empty
.sidenav a:hover...: empty rulesets
.carousel: margin-left: 100px;

您的JavaScript注释不正确。要么使用

单行注释//这是注释
多行/ *这是一条注释* /

轮播停止下拉菜单正常工作

3 个答案: