如何使用jQuery隐藏div onclick和显示onclick [英] how to hide div onclick and show onclick using jquery

问题描述

我正在将搜索建议功能集成到oscommerce脚本中，该功能正常运行，但是我需要创建一个div隐藏onclick并使用jquery(具有动画速度)在输入点击时显示，因为当我开始键入div时会出现但无法隐藏(我必须刷新网页以删除该搜索建议div)

i'm integrating a search suggest function in a oscommerce script, the function is working properly but i need to create a div hide onclick and shown on input click using jquery (with animation speed) since when i start typing the div appears but cannot be hidden (i've to refresh the webpage to remove that search suggest div)

事件将在以下div下创建:

The events will be created under this 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()方法，您可以做到这一点.

By using Jquery hide() and show() methods you can do this..Try ...)

$(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>

这篇关于如何使用jQuery隐藏div onclick和显示onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！