Question

我有两个“子部分”的html表单。

我这样做是为了搜索目的：例如，首先我只看到基本字段，当我点击详细信息（在我的情况下是“Расширенныйпоиск”）时，我看到其他字段，一切正常。但是，当我试图隐藏这些详细的字段时，它们会隐藏，但随后它们会回滚，但为什么呢？

代码：

  $(document).on('click', '#advanced-search-show', function (){
    $("#advanced-search-show-area" ).show("slow");
    $("#advanced-search-show").html("<span id='advanced-search-hide'>Свернуть</span>");
  });

  $(document).on('click', '#advanced-search-hide', function (){
    $("#advanced-search-show-area" ).hide("slow");
    $("#advanced-search-show").html("<span id='advanced-search-show'>Расширенный поиск</span>");
  });

  $(document).on('click', '#reset-form', function (){
    $(this).closest('form').find("input[type=text], textarea, input[type=number]").val("");
    $(this).closest('form').find("input[type=checkbox]").attr('checked', false);
    $(this).closest('form').find("input[type=select] option:eq(1)").prop('selected', true)
  });

和小提琴：http://jsfiddle.net/8UV4c/

如何解决这个bug？

Answer 1

您正在＃advanced-search-show中放置＃advanced-search-hide div。这导致了两个元素＆＃39;单击＃advanced-search-hide时要运行的事件处理程序。没有必要添加＃advanced-search-hide，因为＃advanced-search-show可以轻松处理两种状态之间的切换：

  $(document).on('click', '#advanced-search-show', function (){
      var adv = $("#advanced-search-show-area" );
      _this = $(this);
      adv.toggle("slow", function(){
          _this.html(adv.is(":visible") ? "Свернуть" : "Расширенный поиск Очистить");
      });
  });

  $(document).on('click', '#reset-form', function (){
    $(this).closest('form').find("input[type=text], textarea, input[type=number]").val("");
    $(this).closest('form').find("input[type=checkbox]").attr('checked', false);
    $(this).closest('form').find("input[type=select] option:eq(1)").prop('selected', true)
  });

Answer 2

像这样使用

  $(document).on('click', '#advanced-search-show', function () {
  if ($("#advanced-search-show-area").is(':visible')) {
      $(this).html("Расширенный");
  } else {
      $(this).html("Свернуть");
  }
  $("#advanced-search-show-area").slideToggle();


});

Demo

显示后jQuery隐藏表单字段

2 个答案: