Question

我编写了一个简单的搜索表单，它应该在按钮点击时隐藏/显示。但它没有用。这是JSFiddle。

HTML： -

<form class="search-form searchbar" role="search" id="hiddenSearchBox" action="" method="get">
  <div class="input-group">
    <input type="hidden" name="id" value="63">
    <input type="search" name="keywords" class="form-control" placeholder="Search..">
    <div class="input-group-btn">
      <button type="submit" class="btn btn-default" data-toggle="searchbar" data-target="#hiddenSearchBox">
        <span class="glyphicon glyphicon-search"></span> <span class="sr-only">Submit</span>
      </button>
    </div>
  </div>
</form>

你能发现JSFiddle中的问题吗？

Answer 1

你不需要jquery来进行简单的表演/隐藏。

无论如何，我已经更新了你的小提琴。

＆＃13;

document.getElementById('hideForm').onclick = function() {
document.getElementById('hiddenSearchBox').style.display = 'none';
}

// 
// hidden search bar to top right.
//

if (typeof jQuery === "undefined") { throw new Error("jQuery required"); }

+function ($) {
  'use strict';

  // SEARCHBAR CLASS DEFINITION
  // =========================

  var backdrop = '.searchbar-backdrop';
  var toggle   = '[data-toggle="searchbar"]';
  var Searchbar = function (element) {
    $(element).on('click.mr.searchbar', this.toggle);
  };

  Searchbar.VERSION = '1.0.0';

  Searchbar.prototype.toggle = function (e) {
    var $this = $(this);

    if ($this.is('.disabled, :disabled')) return;

    var $parent  = getParent($this);
    var isActive = $parent.hasClass('open') || (typeof isXS == 'function' && isXS());

    if (!isActive) {
        
      clearMenus();
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
        $('<div class="searchbar-backdrop"/>').insertAfter($(this)).on('click', clearMenus);
      }
      
      var relatedTarget = { relatedTarget: this };
      $parent.trigger(e = $.Event('show.mr.searchbar', relatedTarget));

      if (e.isDefaultPrevented()) return;
      e.preventDefault();

      $parent.find('input').trigger('focus');
      
      $parent
        .toggleClass('open')
        .trigger('shown.mr.searchbar', relatedTarget);

        return false;
    }
  };

  function clearMenus(e) {
    if (e && e.which === 3) return
    $(backdrop).remove();
    $(toggle).each(function () {
      var $parent = getParent($(this));
      var relatedTarget = { relatedTarget: this };
      if (!$parent.hasClass('open')) return;
      $parent.trigger(e = $.Event('hide.mr.searchbar', relatedTarget));
      if (e.isDefaultPrevented()) return;
      $parent.removeClass('open').trigger('hidden.mr.searchbar', relatedTarget);
    });
  }

  function getParent($this) {
    var selector = $this.attr('data-target');
    
    if (!selector) {
      return $this.parents('form');
    }

    var $parent = selector && $(selector);

    return $parent && $parent.length ? $parent : $this.parent();
  }


  // SEARCHBAR PLUGIN DEFINITION
  // ==========================

  function Plugin(option) {
    return this.each(function () {
      var $this = $(this);
      var data  = $this.data('mr.searchbar');

      if (!data) $this.data('mr.searchbar', (data = new Searchbar(this)));
      if (typeof option == 'string') data[option].call($this);
    });
  }

  var old = $.fn.searchbar;

  $.fn.searchbar             = Plugin;
  $.fn.searchbar.Constructor = Searchbar;


  // SEARCHBAR NO CONFLICT
  // ====================

  $.fn.searchbar.noConflict = function () {
    $.fn.searchbar = old;
    return this;
  };


  // APPLY TO STANDARD SEARCHBAR ELEMENTS
  // ===================================

  $(document)
    .on('click.mr.searchbar.data-api', clearMenus)
    .on('click.mr.searchbar.data-api', '.searchbar', function (e) { e.stopPropagation(); })
    //.on('focus.mr.searchbar.data-api', toggle, Searchbar.prototype.toggle) // this causes the focus event to trigger twice
    .on('click.mr.searchbar.data-api', toggle, Searchbar.prototype.toggle);


}(jQuery);

＆＃13;

<!-- hidden search bar to top right -->
        <form class="search-form searchbar" role="search" id="hiddenSearchBox" action="" method="get">
          <div class="input-group">
            <input type="hidden" name="id" value="63">
            <input type="search" name="keywords" class="form-control" placeholder="Search..">
            <div class="input-group-btn">
              <button type="submit" class="btn btn-default" data-toggle="searchbar" data-target="#hiddenSearchBox">
                <span class="glyphicon glyphicon-search"></span> <span class="sr-only">Submit</span>
              </button>
            </div>
          </div>
        </form>
   <button id="hideForm">
   Hide form
   </button>

＆＃13;

Answer 2

只需在HTML＆amp;表格中的表单下方添加一个按钮即可使用jQuery作为 -

from waflib import Context, Options
from waflib import Task, TaskGen
from waflib.Tools.compiler_c import c_compiler

def options(opt):
    opt.load('compiler_c')

def configure(cnf):
    cnf.load('compiler_c')

def build(bld):
    bld.program(features=['t_1', 't_2'], source='main.c', target='abc')

class t_1(Task.Task):
    always_run = True
    run_str = 'echo start t_1 && python -c "import time; time.sleep(4)" && echo end t_1 && mkdir t_1'
    color = 'RED'


@TaskGen.feature('t_1')
@TaskGen.after('apply_link')
@TaskGen.before('t_2')
def add_t_1_task(self):
    self.create_task('t_1')


class t_2(Task.Task):
    always_run = True
    run_str = 'echo start t_2 && python -c "import time; time.sleep(1)" && echo end t_2 && mkdir t_2'
    color = 'RED'


@TaskGen.feature('t_2')
@TaskGen.after('apply_link', 't_1')
def add_t_2_task(self):
    self.create_task('t_2')

$('#hide_form').on('click', function() {
	$('#hiddenSearchBox').toggle();    // toggle(false) will hide it permanently
})

为什么我的搜索表单（应该隐藏在点击按钮上）不隐藏？

2 个答案: