下拉HTML文件下載

-2

我需要一個像這樣的下拉菜單：http://www.w3schools.com/howto/howto_js_dropdown.asp 但有一個提交按鈕，新聞下載所選文件。我希望任何人都可以幫助我。下拉HTML文件下載

2017-01-12 John Burnhard

告訴我們到目前爲止你已經嘗試了什麼？ –

是否可以在Javascript函數上編寫並將其綁定到下拉菜單單擊事件。你可以編寫代碼，然後在那個函數中下載。 –

你是什麼意思的按鈕？你想要一個包含文件的列表，並通過提交的按鈕檢查某人下載或者什麼？ – Teshtek

這是怎麼回事？插入YOUT的聯繫，但也告訴我們你是怎麼設法幫助您更

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

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

h2 { color: #111; font-family: 'Open Sans Condensed', sans-serif; font-size: 24px; font-weight: 70; line-height: 48px; margin: 0 0 24px; padding: 0 30px; text-align: center; text-transform: uppercase; } 
 
p { color: #111; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 28px; margin: 0 0 48px; } 
 
.dropbtn { 
 
    background-color:#51858c; 
 
    color: white; 
 
    padding: 16px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropbtn:hover, .dropbtn:focus { 
 
    background-color:#679196; 
 
} 
 

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

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    overflow: auto; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
} 
 

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

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

 
.show {display:block;}

<h2>Clickable Download</h2> 
 
<p>Click on the button to open the download list</p> 
 

 
<div class="dropdown"> 
 
<button onclick="myFunction()" class="dropbtn">DOWNLOADS</button> 
 
    <div id="myDropdown" class="dropdown-content"> 
 
    <a href="#home">ADD YOUR 1 LINK DOWNLOAD</a> 
 
    <a href="#about">ADD YOUR 2 LINK DOWNLOA</a> 
 
    <a href="#contact">ADD YOUR 3 LINK DOWNLOA</a> 
 
    </div> 
 
</div>

來源

2017-01-12 14:39:11 Teshtek

下拉HTML文件下載

回答

相關問題