Карусель прекращает работу выпадающего меню - PullRequest
Новая
       6

Карусель прекращает работу выпадающего меню

0 голосов
/ 03 января 2019

Я создаю очень простую страницу с заголовком, небольшую навигацию с последней опцией в виде выпадающего меню и плагин начальной загрузки для карусели. Поскольку я добавил карусель, выпадающее меню не работает.

Я относительно новичок в программировании и обучении, создав эту страницу. Раскрывающееся меню должно появиться по ссылке «коллекции» с двумя другими вариантами.

Код для карусели был отредактирован с w3school.com, и я попытался изменить поля, чтобы он не перекрывался с моим раскрывающимся списком, но не повезло. Хотите знать, есть ли проблема с ссылками jquery, которые я использую, или я что-то пропустил из кода? Ниже я привел некоторые подробности, чтобы не слишком много разбираться в вещах, которые я не считал релевантными (.main, .active,. Раскрывающийся контейнер и т. Д.), Но если мне нужно включить их здесь, пожалуйста, дайте мне знать.

Любая помощь будет очень цениться! Большое спасибо. 

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

Ответы [ 3 ]

0 голосов
/ 03 января 2019

Было несколько мелких ошибок.Порядок скриптов был неверным.Bootrstrap требует 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>
0 голосов
/ 03 января 2019

Во-первых, давайте исправим основные синтаксические ошибки вашего кода CSS:

Head: Href для bootstrap.min.css нельзя поместить в 2 строки.Он должен храниться в одной строке. 

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

Ваш JavaScript не прокомментирован правильно.Либо используйте

  • Однострочные комментарии // Это комментарии
  • Многострочный / * Это комментарий * /
0 голосов
/ 03 января 2019

В вашем теле script есть комментарий, который открывается неправильно. Комментарии в javascript могут быть:

  • Одна строка: // This is a single line comment
  • Многолинейность: /* This is a multi line comment */

Ваш код имеет следующую строку, которая нарушает работу приложения: //* 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 */

Компилятор теперь распознает это как однострочный комментарий из-за // в начале, поэтому остальная часть кода больше не будет работать. Компилятор теперь пытается интерпретировать такие строки, как «выпадающий контент - ...» как javascript, а это не так. Удалите первый слеш, чтобы сделать его многострочным комментарием, и ваш код должен быть исправлен!

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

Похожие темы

...