單擊按鈕時輸入框切換
[英]Input box toggle when click button
問題描述
當我按下搜索按鈕（紅色方塊）鏈接圖像時，如何使輸入框（藍色方塊）可見/隱藏
我試圖在 CSS 中進行轉換，我也在 javascript 中進行了測試，但是 JS ...我關閉了（idk js 是如何工作的）
現在，我嘗試了什么！
$("#Hide").click(function() { $(".buttontoggle").hide("blind"); });
* { padding: 0; margin: 0; } html { background-image: url(../Images/background.jp); background-repeat: no-repeat; background-attachment: fixed; font-family: 15px/1.5 'Arial', 'Helvetica', 'sans-serif', 'Montserrat'; } body { height: 2000px; } .container { border: 2px solid; width: 1164px; height: 1600px; margin: 177px 350px 0px 371px; overflow: hidden; background-color: #0A081E; } /* #region Header */ header { background: #0A081E; color: #ffffff; padding-top: 0px; min-height: 55px; border-bottom: #e8491d 3px solid; position: fixed; min-width: 1920px; top: 0px; z-index: 1; } header a { color: #ffffff; text-decoration: none; text-transform: uppercase; font-size: 14px; } header li { float: left; display: inline; padding: 11px 45px 0 15px; margin-left: -30px; } #logo { width: 360px; height: 55px; background-size: cover; background-repeat: no-repeat; } header #logo { float: left; background-image: url(../Images/logo.png); background-size: 280px 40px; margin: 7px 0px -7px 40px; } .nav-container { width: 1280px; margin: auto; overflow: hidden; right: 10px; } header nav { float: right; margin-top: 10px; } header a:hover { color: #cccccc; } .vl { border-left: 2px solid white; height: 35px; float: left; position: absolute; left: 76.40%; top: 10px; opacity: 0.76; border-radius: 35%; } .LoginButton { margin: -11px -3px 0px 20px; background-color: #0A081E; /* Green */ border: none; color: white; padding: 10px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; border-radius: 15%; font-weight: bold; } .LoginButton:hover { background-color: #ffffff; } .LoginButton:hover a { color: black; font-weight: bold; } .fa-search { margin: -7px 0px 0px 0px; background-color: #0A081E; /* Green */ border: none; color: white; text-align: center; padding: 5px 5px; text-decoration: none; display: inline-block; font-size: 15px; transition-duration: 0.4s; cursor: pointer; border-radius: 15%; position: relative; } .fa-search:hover { background-color: #ffffff; color: black; } .searchbox { border: 1px solid red; box-sizing: border-box; border-radius: 4px; margin: -5px -10px 0px -5px; padding: 0px 6px 6px 6px; visibility: visible; text-align: center; }
<body> <header> <div class="nav-container"> <a href="Default.aspx" id="Logo"> </a> <nav> <ul> <li class="buttontoggle"> <a href="#">New Release</a> </li> <li class="buttontoggle"> <a href="#">Others</a> </li> <li class="buttontoggle"> <a href="#">Top</a> </li> <li class="buttontoggle"> <a href="#">Contact</a> </li> <li> <form> <input type="text" class="searchbox" name="search" /> </form> </li> <li><i class="fa fa-search" id="Hide"></i></li> <div class="vl"></div> <li> <span class="LoginButton"> <a href="#" >Login</a> </span> </li> </ul> </nav> </div> </header> <body>
這是我寫的最后一個代碼……我也嘗試過在 css 中使用 webkit 轉換，但這不是我想要的 和
我的英語很差，我想你不會明白我的意思
編輯：您可以嘗試實時編輯它：...網頁
1 個解決方案
解決方案1
1 已采納 2017-12-25 22:23:49
您應該使用切換而不是隱藏，如下所示
$("#Hide").click(function() {
$(".searchbox").toggle("blind");
});
當然，您已經確保在 html 中包含 jquery。 如果沒有，只需將其添加到您的 html 中即可快速測試您的工作：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
字體真棒也是一樣
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
在按鈕單擊上切換輸入
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.