特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

最近在学习JS控制搜索框弹出,做下笔记。

JS代码

$(‘.header-operate svg’).on(‘click’, function(){
$(‘.ptm-search’).toggle();
$(‘.searchinput’).focus();
});

 

.header-operate svg为按钮或者图标的class,

.ptm-search为搜索的div

.searchinp为搜索框

toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

该方法也可用于切换被选元素的 hide() 与 show() 方法。

hide():隐藏可见的 <p> 元素:

$(".btn1").click(function(){
  $("p").hide(); });

show():显示出隐藏的 <p> 元素。

$(".btn2").click(function(){
  $("p").show(); });

focus() 方法用于为 checkbox 赋予焦点。

下面的例子设置或移开 checkbox 上的焦点:

<html>
<head>
<script type="text/javascript">
function setFocus()
  {
  document.getElementById('check1').focus() } function loseFocus() { document.getElementById('check1').blur() } </script> 
</head> 
<body> 
<form> 
<input type="checkbox" id="check1" />
<br /> 
<input type="button" onclick="setFocus()" value="Set focus" /> 
<input type="button" onclick="loseFocus()" value="Lose focus" /> 
</form> 
</body> 
</html>

 

未经允许不得转载:作者:小刀资源网, 转载或复制请以 超链接形式 并注明出处 小刀资源网
原文地址:《YG修改笔记:JS控制搜索功能弹出》 发布于2019-09-29

分享到:
赞(0) 打赏

评论 抢沙发

评论前必须登录!

  注册



YG修改笔记:JS控制搜索功能弹出

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.0主题
切换注册

登录

忘记密码 ?

切换登录

注册