Почему мое раскрывающееся меню не отображается?

Question

Так что я в основном перепробовал все, что мог придумать. Я хочу создать раскрывающееся меню из изображения, которое я использую. Курсору удается превратиться в указатель. Я действительно потерян из-за того, что сделал неправильно.

Это HTML-код, который у меня есть прямо сейчас:

<a>

  <img class="dropbtn" id="profile" src="img/icons/Profiel.png" alt="Profiel" width="50px" heigt="50px">

    <div id="myDropdown" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </img>
</a>

А вот CSS:

/* Dropdown Button */
.dropbtn {
    cursor: pointer;
    background-color: none;
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

html css drop-down-menu dropdown

0

Tigerotic 11 Янв 2017 в 13:55

1

Что происходит? Не могли бы вы опубликовать демонстрацию на jsfiddle.net, включая js, который добавляет класс show?

–

xec

11 Янв 2017 в 13:58

2

Почему вы пытаетесь обернуть изображение вокруг div close изображение не существует </img> удалите это. Также у вас есть пустой якорь, который стучит все, что тоже нужно удалить.

–

Andrew

11 Янв 2017 в 13:59

Рассмотрите возможность использования Bootstrap?

–

Prarthana Hegde

11 Янв 2017 в 14:03

Answer 1

Используйте код ниже

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("show");
});

.dropbtn {
    cursor: pointer;
    background-color: none;
}


/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
a:hover .dropdown-content {display:block}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>

  <img class="dropbtn" id="profile" src="img/icons/Profiel.png" alt="Profiel" width="50px" heigt="50px">

    <div id="myDropdown" class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
 
</a>

1

Nishant Saini 11 Янв 2017 в 14:06

Фрагмент кода здесь, кажется, работает нормально, но когда я копирую код, мой Scout обнаруживает ошибку на строчку перед кодом (каждый раз). Вы знаете, почему это так?

–

Tigerotic

11 Янв 2017 в 14:57

Покажите мне свою ссылку, тогда я проверю .... или проверьте, добавили ли вы уже jquery или нет

–

Nishant Saini

12 Янв 2017 в 06:27

Да, я не добавил jQuery. Как я могу это сделать? :)

–

Tigerotic

12 Янв 2017 в 12:30

Добавить jquery в раздел заголовка или тела, но перед $ (". dropbtn"). click (function () {$ ("# myDropdown"). toggleClass ("show");});

–

Nishant Saini

12 Янв 2017 в 12:31

Answer 2

Вы готовы использовать jQuery?

Вы можете добиться желаемого, просто добавив:

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("open");
});

Codepen Demo

$(".dropbtn").click(function() {
  $("#myDropdown").toggleClass("open");
});

/* Dropdown Button */

.dropbtn {
  cursor: pointer;
  background-color: none;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.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.open {
  display: block;
}

/* Links inside the dropdown */

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


/* Change color of dropdown links on hover */

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


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<a>
  <img class="dropbtn" id="profile" src="http://placehold.it/350x350" alt="Profiel" width="50px" height="50px">

  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  </img>
</a>

0

sol 11 Янв 2017 в 14:03

Простое добавление кода для меня не работает .. Но я предполагаю, что тогда мне нужно знать, как работает jQuery? Я никогда не работал с jQuery.

–

Tigerotic

11 Янв 2017 в 14:28

Вам необходимо включить jQuery в свой проект. Из фрагмента видно, что я добавил его с помощью тегов скрипта. Добавьте эту строку в заголовок своей html-страницы.

–

sol

11 Янв 2017 в 14:36

Когда вы щелкаете изображение, код jQuery добавляет класс .show в myDropdown. В CSS вы увидите, что .show оформлен с использованием display: block. Это тоже должно быть.

–

sol

11 Янв 2017 в 14:39

Фрагмент кода здесь, кажется, работает нормально, но когда я копирую код, мой Scout обнаруживает ошибку на строчку перед кодом (каждый раз). Вы знаете, почему это так?

–

Tigerotic

11 Янв 2017 в 14:57

Answer 3

Вы обязательно изменили раскрывающееся меню CSS на display: block; при нажатии на изображение?

Если нет, попробуйте это ( JavaScript ):

var trigger = document.getElementById("profile"),
    dropdown = document.getelementById("myDropdown");

trigger.onclick = function(){ // on image click
    dropdown.classList.toggle("active"); // toggle dropdown display
});

CSS :

Или jQuery (если на него есть ссылка на вашем веб-сайте):

$("#profile").click(function(){ // on image click
    $("#myDropdown").toggleClass("active"); // toggle dropdown display
});

Обязательно (если вы еще не знаете) добавили указанное выше в тег script в тегах <head> или <body> в своем HTML document!

#myDropdown.active{ /* if #myDropdown has class "active" */
    display: block; /* make the dropdown visible */
}

Надеюсь это поможет! :-)

0

GROVER. 11 Янв 2017 в 14:23

Почему мое раскрывающееся меню не отображается?

3 ответа

Похожие вопросы

Новые вопросы

html