2017-01-12 18 views
-2

このようなドロップダウンメニューが必要です:http://www.w3schools.com/howto/howto_js_dropdown.asp しかし、送信ボタンを押すと、選択したファイルがダウンロードされます。私は誰でも私を助けることができるといいですドロップダウンHTMLファイルのダウンロード

+1

を手助けしようとしなかったものを私たちに示して、あなたがこれまで試したどのような私たちを見ますか? –

+0

Javascriptの関数に書き込んでドロップダウンメニューのクリックイベントにバインドすることは可能ですか?あなたはその関数で罰金をダウンロードするコードを書くことができます。 –

+0

ボタンで何を意味しましたか?あなたは、ファイルとリストを送信するボタンまたは何でダウンロードする誰かをチェックしたいですか? – Teshtek

答えて

0

この点についてはどうですか? 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>

関連する問題