Wie fügt man ein anklickbares Dropdown-Menü in Blogger hinzu?

Question

Also, ich fand diese link auf anklickbare Dropdown-Menüs, aber wenn ich das implementieren, funktioniert es aus irgendeinem Grund nicht. Ich versuchte, den HTML-Code in das Gadget hinzugefügt, aber ich weiß nicht, wo in den JavaScript zu setzen.

Answer 1

function myFunction() { 
 
    document.getElementById("myDropdown").classList.toggle("show"); 
 
} 
 

 
// Close the dropdown menu if the user clicks outside of it 
 
window.onclick = function(event) { 
 
    if (!event.target.matches('.dropbtn')) { 
 

 
    var dropdowns = document.getElementsByClassName("dropdown-content"); 
 
    var i; 
 
    for (i = 0; i < dropdowns.length; i++) { 
 
     var openDropdown = dropdowns[i]; 
 
     if (openDropdown.classList.contains('show')) { 
 
     openDropdown.classList.remove('show'); 
 
     } 
 
    } 
 
    } 
 
}

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
/* Dropdown button on hover & focus */ 
 
.dropbtn:hover, .dropbtn:focus { 
 
    background-color: #3e8e41; 
 
} 
 

 
/* 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); 
 
    z-index: 1; 
 
} 
 

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

<div class="dropdown"> 
 
    <button onclick="myFunction()" class="dropbtn">Dropdown</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#">Link 3</a> 
 
    </div> 
 
</div>

Dies ist der gleiche Code in dem Beispiel verwendeten Sie gesendet haben, können Sie die Javascript und Einsatz kommen am Ende des hTML zwischen zwei Script-Tags wie folgt aus:

<script type="text/javascript"> 
    <!-- javascript GOES HERE --> 
<script> 

Answer 2

können Sie JavaScript-Code innerhalb von hTML fügen Sie es innerhalb <script></script> Tag