Single Button mit Drop-Down-Menü Effekte - Hilfe verfeinern

Question

Ich arbeite auf einer Kundenseite und sie möchten eine Dropdown-Taste auf dem Hauptbanner der Website haben.

Ich war in der Lage, es zu programmieren und es zur Arbeit zu bringen, aber es scheint ein bisschen temperamentvoll zu sein. Die Schaltfläche funktioniert, aber nicht jedes Mal, wenn Sie darauf klicken und sicherlich nicht reibungslos. Kann jemand sich das ansehen und mich wissen lassen, ob es etwas anderes ist, das mit diesem Code in Konflikt steht oder was ich tun könnte, um es besser abzustimmen und es besser funktionieren zu lassen?

Ich bin mit dem folgenden CSS:

/* Dropdown Button */ 
.dropbtn { 
    background-color: rgba(102, 146, 255, 0.87); 
    color: white; 
    padding: 9px 15px 14px 15px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
    border-radius: 6px; 
} 

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

/* 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: 9px 32px; 
    text-decoration: none; 
    display: block !important; 
    border-bottom: 1px solid #4A5056; 
} 

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

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

Die folgende HTML:

<div class="dropdown"> 
    <button onclick="myFunction()" class="dropbtn"><span style="  vertical-align: bottom;font-size: 24px; ">LISTEN</span> <i class="fa fa-volume-up fa-4x"></i></button> 
    <div id="myDropdown" class="dropdown-content"> 
<a href="http://lonebeacondevelopment.com/financialexchange/listen-live/" class="popup" data-height="300" data-width="300" data-scrollbars="0" alt="LISTEN LIVE"> 
LISTEN LIVE</a> 
    <a href="http://lonebeacondevelopment.com/financialexchange/on-demand/">ON DEMAND</a> 
    </div> 
</div> 

und die folgenden JS:

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */ 
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'); 
     } 
    } 
    } 
} 

Der Link ist http://lonebeacondevelopment.com/financialexchange/ das blau ist Hören Schaltfläche in der oberen rechten Ecke im Banner.

JEDE Hilfe würde sehr geschätzt werden.

Vielen Dank!

Answer 1

Ok Sie tun können, ist Span entfernen innerhalb des Knopfes und Paste Spanne Styling in Schaltflächenklasse wie diese

CSS

/* Dropdown Button */ 
.dropbtn { 
    background-color: rgba(102, 146, 255, 0.87); 
    color: white; 
    padding: 9px 15px 14px 15px; 
    font-size: 16px; 
    border: none; 
    cursor: pointer; 
    border-radius: 6px; 

vertical-align: bottom;font-size: 24px; /*HERE The CODE of SPAN*/ 

} 

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

/* 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: 9px 32px; 
    text-decoration: none; 
    display: block !important; 
    border-bottom: 1px solid #4A5056; 
} 

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

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

<div class="dropdown"> 
    <button onclick="myFunction()" class="dropbtn">LISTEN <i class="fa fa-volume-up fa-4x"></i></button> 
    <div id="myDropdown" class="dropdown-content"> 
<a href="http://lonebeacondevelopment.com/financialexchange/listen-live/" class="popup" data-height="300" data-width="300" data-scrollbars="0" alt="LISTEN LIVE"> 
LISTEN LIVE</a> 
    <a href="http://lonebeacondevelopment.com/financialexchange/on-demand/">ON DEMAND</a> 
    </div> 
</div> 

Answer 2

        Sie die Set Funktion 'myFunction' nur für die Schaltfläche, aber das tut nicht bedeutet, dass es durch die spanne oder i elemente innerhalb der taste ausgelöst wird.
Um es zu lösen diese (mit jQuery) versuchen:

HTML

<div class="dropdown"> 
     <div class="dropbtn"> <!--CHANGED THIS--> 
      <span style="vertical-align: bottom;font-size: 24px; ">LISTEN</span> 
      <i class="fa fa-volume-up fa-4x"></i> 
     </div> 
     <div id="myDropdown" class="dropdown-content"> 
      <a href="http://lonebeacondevelopment.com/financialexchange/listen-live/" class="popup" data-height="300" data-width="300" data-scrollbars="0" alt="LISTEN LIVE">LISTEN LIVE</a> 
      <a href="http://lonebeacondevelopment.com/financialexchange/on-demand/">ON DEMAND</a> 
     </div> 
</div> 

JS/JQ

$(document).ready(function() { 
    $(".dropbtn").click(function(){ 
      document.getElementById("myDropdown").classList.toggle("show"); 
    }); 


    $("body").click(function(e){ 
     if(e.target.className !== "form_wrapper"){ 
      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'); 
       } 
      } 
     } 
    }); 
});