[英]How to hide div onclick and show onclick using jquery
我正在 oscommerce 脚本中集成搜索建议功能。 该功能工作正常,但我需要创建一个 div 隐藏 onclick 并使用 Jquery(具有动画速度)在输入点击时显示,因为当我开始输入时,div 出现但无法隐藏(我必须刷新网页以删除搜索建议 div)
事件将在此 div 下创建:
<div id="smartsuggest"></div>
这是我的代码:
$data = '<div class="search">'."\n".
tep_draw_form('quick_find', tep_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', 'NONSSL', false), 'get', 'id="frmSearch"')."\n".// ' <label class="fl_left">'.MODULE_BOXES_SEARCH_HEADER_BOX_TITLE.': </label>' ."\n".
' '.tep_draw_button_search_top().tep_draw_button(MODULE_BOXES_SEARCH_HEADER_BOX_TITLE).tep_draw_button_search_bottom()."\n".
' <div class="input-width">'."\n".
' <div class="width-setter">'."\n".
tep_draw_input_field('keywords', MODULE_BOXES_SEARCH_HEADER_BOX_INPUT, 'id="txtSearch" onkeyup="searchSuggest(event);" autocomplete="off" size="10" maxlength="300" class="go fl_left" onblur="if(this.value==\'\') this.value=\''.MODULE_BOXES_SEARCH_HEADER_BOX_INPUT.'\'" onfocus="if(this.value ==\''.MODULE_BOXES_SEARCH_HEADER_BOX_INPUT.'\' ) this.value=\'\'"').''.tep_hide_session_id()."\n".
' </div>'."\n".
' <div id="smartsuggest" ></div> '.
' </div>'."\n".'</form>'."\n".
'</div>
<script type="text/javascript">
$(function(){
var mq = window.matchMedia( "(max-width: 480px)" );
if((mq.matches)) {
$(".input-width").click(function() {
$(this).animate({right: "0", width: "125px"}, 500);
});
$(".input-width input").blur(function(){
$(this).parent().parent().animate({right: "0", width: "125px"}, 500);
});
}else{
$(".input-width").click(function() {
$(this).animate({right: "0", width: "360px"}, 500);
});
$(".input-width input").blur(function(){
$(this).parent().parent().animate({right: "0", width: "190px"}, 500);
});
}
});
</script>
'."\n";
// MOD: BOF - SmartSuggest
if (SMARTSUGGEST_ENABLED != 'false') {
require(DIR_WS_CLASSES.'smartsuggest.php');
$smartsuggest = new smartsuggest();
$smartsuggest->output($data);
}
// MOD: EOF - SmartSuggest
通过使用 Jquery hide() 和 show() 方法,你可以做到这一点......试试......)
$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <p>If you click on the "Hide" button, I will disappear.</p> <button id="hide">Hide</button> <button id="show">Show</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.