單擊顯示和隱藏搜索框
[英]click show and hide search box
問題描述
我想像我在下面上傳的視頻中那樣做。 這就是我現在所做的，但是當我單擊搜索圖標時，我無法將其替換為 x 圖標。 我想我不能這樣做，因為我對 Javascript 知之甚少。 如果你能幫我解決這個問題，我會很高興。
https://files.fm/f/856dwf9kj
function buttonUp(){ var valux = $('.sb-search-input').val(); valux = $.trim(valux).length; if(valux !== 0){ $('.sb-search-submit').css('z-index','99'); } else{ $('.sb-search-input').val(''); $('.sb-search-submit').css('z-index','-999'); } } $(document).ready(function(){ var submitIcon = $('.sb-icon-search'); var submitInput = $('.sb-search-input'); var searchBox = $('.sb-search'); var qutu = $('.qutu'); var isOpen = false; $(document).mouseup(function(){ if(isOpen == true){ submitInput.val(''); $('.sb-search-submit').css('z-index','-999'); submitIcon.click(); } }); submitIcon.mouseup(function(){ return false; }); searchBox.mouseup(function(){ return false; }); submitIcon.click(function(){ if(isOpen == false){ searchBox.addClass('sb-search-open'); qutu.removeClass('noborder'); qutu.addClass('bborder'); isOpen = true; } else { searchBox.removeClass('sb-search-open'); qutu.removeClass('bborder'); qutu.addClass('noborder'); isOpen = false; } }); });
body{ margin: 40px 60px; } *{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.5s; } form{ display: inline-block; } .sb-search { position: relative; margin-top: 10px; width: 0%; min-width: 50px; height: 50px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.5s; -webkit-backface-visibility: hidden; } .bborder{ opacity: 1; } .noborder{ opacity: 0; } .sb-search-input { position: absolute; top: 0; right: 0px; border: none; outline: none; width: 300px; height: 50px; margin: 0; z-index: 10; padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: #2c3e50; } input[type="search"].sb-search-input { -webkit-appearance: none; -webkit-border-radius: 0px; border:1px black solid; } .sb-search-input::-webkit-input-placeholder { color: #fff; } .sb-search-input:-moz-placeholder { color: #fff; } .sb-search-input::-moz-placeholder { color: #fff; } .sb-search-input:-ms-input-placeholder { color: #fff; } .sb-icon-search, .sb-search-submit { width: 60px; height: 60px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 60px; text-align: center; cursor: pointer; } .sb-search-submit { background: #fff; /* IE needs this */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0); /* IE 5-7 */ opacity: 0; color: transparent; border: none; outline: none; z-index: -1; } .sb-icon-search { color: black; background: #fff; width: 35px; height: 0px; z-index: 90; margin: -5px; top: 1px; right: 6px; font-size: 22px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; } .sb-icon-search:before { content: ""; } .sb-search.sb-search-open, .no-js .sb-search { width: 300px; } .sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search { background: #fff; color: black; z-index: 11; } .sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit { /* z-index: 90;*/ }
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Search bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'><link rel="stylesheet" href="./style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> </head> <body> <!-- partial:index.partial.html --> <div id="sb-search" class="sb-search " > <form> <input class="sb-search-input qutu noborder" onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search"> <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"><i class="fa fa-search"></i></span> </form> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
1 個解決方案
解決方案1
0 2021-11-15 20:20:50
我根據您提供的代碼段在下面做了一個非常簡單的示例。 唯一的區別是在submitIcon.click內部。 您只需要通過添加/刪除類來完成元素searchBox和qutu的操作。 多虧了這一點，您將能夠更改要用於元素的 FontAwesome 圖標。 它可能是完美的，比如在刪除或添加它之前檢查類是否存在（在直接的情況下它不應該，但我們永遠不知道）。
function buttonUp(){ var valux = $('.sb-search-input').val(); valux = $.trim(valux).length; if(valux !== 0){ $('.sb-search-submit').css('z-index','99'); } else{ $('.sb-search-input').val(''); $('.sb-search-submit').css('z-index','-999'); } } $(document).ready(function(){ var submitIcon = $('.sb-icon-search'); var submitInput = $('.sb-search-input'); var searchBox = $('.sb-search'); var qutu = $('.qutu'); var isOpen = false; $(document).mouseup(function(){ if(isOpen == true){ submitInput.val(''); $('.sb-search-submit').css('z-index','-999'); submitIcon.click(); } }); submitIcon.mouseup(function(){ return false; }); searchBox.mouseup(function(){ return false; }); submitIcon.click(function(){ if(isOpen == false){ searchBox.addClass('sb-search-open'); qutu.removeClass('noborder'); qutu.addClass('bborder'); searchBox.find('i.fa').removeClass('fa-search'); searchBox.find('i.fa').addClass('fa-times'); isOpen = true; } else { searchBox.removeClass('sb-search-open'); qutu.removeClass('bborder'); qutu.addClass('noborder'); searchBox.find('i.fa').removeClass('fa-times'); searchBox.find('i.fa').addClass('fa-search'); isOpen = false; } }); });
body{ margin: 40px 60px; } *{ -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.5s; } form{ display: inline-block; } .sb-search { position: relative; margin-top: 10px; width: 0%; min-width: 50px; height: 50px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.5s; -webkit-backface-visibility: hidden; } .bborder{ opacity: 1; } .noborder{ opacity: 0; } .sb-search-input { position: absolute; top: 0; right: 0px; border: none; outline: none; width: 300px; height: 50px; margin: 0; z-index: 10; padding: 20px 65px 20px 20px; font-family: inherit; font-size: 20px; color: #2c3e50; } input[type="search"].sb-search-input { -webkit-appearance: none; -webkit-border-radius: 0px; border:1px black solid; } .sb-search-input::-webkit-input-placeholder { color: #fff; } .sb-search-input:-moz-placeholder { color: #fff; } .sb-search-input::-moz-placeholder { color: #fff; } .sb-search-input:-ms-input-placeholder { color: #fff; } .sb-icon-search, .sb-search-submit { width: 60px; height: 60px; display: block; position: absolute; right: 0; top: 0; padding: 0; margin: 0; line-height: 60px; text-align: center; cursor: pointer; } .sb-search-submit { background: #fff; /* IE needs this */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */ filter: alpha(opacity=0); /* IE 5-7 */ opacity: 0; color: transparent; border: none; outline: none; z-index: -1; } .sb-icon-search { color: black; background: #fff; width: 35px; height: 0px; z-index: 90; margin: -5px; top: 1px; right: 6px; font-size: 22px; font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; } .sb-icon-search:before { content: ""; } .sb-search.sb-search-open, .no-js .sb-search { width: 300px; } .sb-search.sb-search-open .sb-icon-search, .no-js .sb-search .sb-icon-search { background: #fff; color: black; z-index: 11; } .sb-search.sb-search-open .sb-search-submit, .no-js .sb-search .sb-search-submit { /* z-index: 90;*/ }
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Search bar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css'><link rel="stylesheet" href="./style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> </head> <body> <!-- partial:index.partial.html --> <div id="sb-search" class="sb-search " > <form> <input class="sb-search-input qutu noborder" onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search"> <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"><i class="fa fa-search"></i></span> </form> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
第一次無法隱藏和顯示復選框單擊事件中的元素
[英]Unable to hide and show element on check box click event for the first time
單擊tr隱藏並顯示文本框，然后單擊按鈕在div中打印相同的文本框
[英]hide and show text box on click of a tr and on button click print the same in a div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.