允許背景圖像url可點擊

Question

有沒有辦法讓這個（搜索）圖標可點擊？我希望它可以用作它下面列表的展開/摺疊按鈕。該列表是HTML，我可以隱藏並顯示它。我更好奇我如何讓圖標可以點擊來隱藏/顯示ul/li列表。如果這是可能的，可以以某種方式應用動畫。這是來自W3學校的樣本，但我有我自己的數據。我應該將其轉換爲不同類型的列表嗎？還有一些例子在線收錄帶有動畫的可伸縮列表。

function myFunction() { 
 
    var input, filter, ul, li, a, i; 
 
    input = document.getElementById("myInput"); 
 
    filter = input.value.toUpperCase(); 
 
    ul = document.getElementById("myUL"); 
 
    li = ul.getElementsByTagName("li"); 
 
    for (i = 0; i < li.length; i++) { 
 
     a = li[i].getElementsByTagName("a")[0]; 
 
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
      li[i].style.display = ""; 
 
     } else { 
 
      li[i].style.display = "none"; 
 

 
     } 
 
    } 
 
}

* { 
 
    box-sizing: border-box; 
 
} 
 

 
#myInput { 
 
    background-image: url('https://www.w3schools.com/css/searchicon.png'); 
 
    background-position: 10px 12px; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    font-size: 16px; 
 
    padding: 12px 20px 12px 40px; 
 
    border: 1px solid #ddd; 
 
    margin-bottom: 0px; 
 
} 
 

 
#myUL { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#myUL li a { 
 
    border: 1px solid #ddd; 
 
    margin-top: -1px; /* Prevent double borders */ 
 
    background-color: #f6f6f6; 
 
    padding: 12px; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
    color: black; 
 
    display: block 
 
} 
 

 
#myUL li a:hover:not(.header) { 
 
    background-color: #eee; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br><br> 
 
<div> 
 
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> 
 
</div> 
 

 
<ul id="myUL"> 
 
    <li><a href="#">Adele</a></li> 
 
    <li><a href="#">Agnes</a></li> 
 

 
    <li><a href="#">Billy</a></li> 
 
    <li><a href="#">Bob</a></li> 
 

 
    <li><a href="#">Calvin</a></li> 
 
    <li><a href="#">Christina</a></li> 
 
    <li><a href="#">Cindy</a></li> 
 
</ul>

Answer 1

你可以通過添加一個事件監聽器使點擊任何DOM元素。在您的示例中，該圖標是input元素的背景圖像，因此您需要將其從中移除並使其成爲與其交互的獨立圖像。然後你可以添加事件監聽器來點擊，觸發一個函數來顯示/隱藏列表（我改變了css開始隱藏）。

var searchIco = document.getElementById("search-ico"); 
 
var myUL = document.getElementById("myUL"); 
 
searchIco.addEventListener("click", function() { 
 
    if(myUL.style.display == 'block') { 
 
    myUL.style.display = 'none'; 
 
    // or: myUL.removeAttribute("style"); 
 
    } else { 
 
    myUL.style.display = 'block'; 
 
    } 
 
}); 
 

 
function myFunction() { 
 
    var input, filter, ul, li, a, i; 
 
    input = document.getElementById("myInput"); 
 
    filter = input.value.toUpperCase(); 
 
    ul = document.getElementById("myUL"); 
 
    li = ul.getElementsByTagName("li"); 
 
    for (i = 0; i < li.length; i++) { 
 
     a = li[i].getElementsByTagName("a")[0]; 
 
     if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
      li[i].style.display = ""; 
 
     } else { 
 
      li[i].style.display = "none"; 
 

 
     } 
 
    } 
 
}

* { 
 
    box-sizing: border-box; 
 
} 
 
/* New */ 
 
#search-ico { 
 
    width: 16px; 
 
    height: 16px; 
 
} 
 
/* Background removed, size changed */ 
 
#myInput { 
 
    width: 80%; 
 
    font-size: 16px; 
 
    padding: 12px 20px 12px 40px; 
 
    border: 1px solid #ddd; 
 
    margin-bottom: 0px; 
 
} 
 

 
#myUL { 
 
    display: none; /* Added to start hidden */ 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#myUL li a { 
 
    border: 1px solid #ddd; 
 
    margin-top: -1px; /* Prevent double borders */ 
 
    background-color: #f6f6f6; 
 
    padding: 12px; 
 
    text-decoration: none; 
 
    font-size: 18px; 
 
    color: black; 
 
    display: block 
 
} 
 

 
#myUL li a:hover:not(.header) { 
 
    background-color: #eee; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br><br> 
 
<div> 
 
<!-- Add the icon as a separate image --> 
 
<img id="search-ico" src="https://www.w3schools.com/css/searchicon.png"> 
 
<!-- end of edited --> 
 
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> 
 
</div> 
 

 
<ul id="myUL"> 
 
    <li><a href="#">Adele</a></li> 
 
    <li><a href="#">Agnes</a></li> 
 

 
    <li><a href="#">Billy</a></li> 
 
    <li><a href="#">Bob</a></li> 
 

 
    <li><a href="#">Calvin</a></li> 
 
    <li><a href="#">Christina</a></li> 
 
    <li><a href="#">Cindy</a></li> 
 
</ul>

Answer 2

你可以調用基於jQuery（因爲你已經在使用jQuery）中的slideToggle功能

$('#myInput').click(function(){ 
    $('#myUL').slideToggle('slow'); 
}); 

瞭解更多關於sideToggle這裏 - http://api.jquery.com/slidetoggle/