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

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

Answer 1

Вы открыты для использования 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>

Answer 2

Использование ниже кода

$(".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>

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>, внутри вашего HTMLdocument!

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

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