Как я могу показать и скрыть форму с помощью jquery?

Question

Im пытается показать скрытые DIV с помощью CSS и JQuery: На самом деле у меня есть следующий код:

<div class="collapse navbar-collapse navbar-ex1-collapse"> 
       <ul class="nav navbar-nav "> 
        <li class=""><a href="index.html">Inicio</a></li> 
        <!--<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Recetas<span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Carne</a></li> 
      <li><a href="#">Verduras</a></li> 
      <li><a href="#">Pescado</a></li> 
     </ul> 
     </li>--> 
        <li><a href="suscripcions.html">Suscripciones</a></li> 
       </ul> 



       <ul class="nav navbar-nav navbar-right"> 
        <li><form class="navbar-form nav navbar-nav " role="search"> 
         <fieldset> 
          <input type="search" /> 

          <button type="submit" id="AdvanceSearchButton"><i class="fa fa-search" ></i></button> 
         </fieldset> 
        </form> 
         </li> 


        <li><a href="register.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
        <li><a id="log" data-toggle="modal" data-target="#myModal" href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
       </ul> 
      </div> 

Я хочу показать мой Див AdvanceSearch при нажатии на кнопку AdvanceServiceButton.

<div id="AdvanceSearch"> 
     <h1> DIV for show </h1> 

    </div> 

Для этого им с помощью следующего сценария с JQuery:

$(document).ready(function() { 
$('#AdvanceSearchButton').click(function(){ 
       $('#AdvanceSearch').fadeIn(1000) 
      })/* Randall */ 
      }); 

Моя проблема заключается в том, что при нажатии этой кнопки DIV предъявляется и скрыта. Проблема заключается в кнопке, потому что с помощью настраиваемой кнопки это работает правильно, но не с помощью кнопки от boostrap. Это может быть проблема?

С уважением.

Answer 1

Вы создаете кнопку внутри формы, типа submit, поэтому действие по умолчанию при нажатии кнопки «Отправить» - это отправить форму. В прикрепленном javascript вы показываете форму расширенного поиска, но не блокируете отправку формы.

Я хотел бы предложить следующую наценку (кстати отступы ваш HTML является повсюду, по крайней мере, сделать небольшое усилие, чтобы сделать код для чтения):

<form class="navbar-form nav navbar-nav" role="search"> 
    <fieldset> 
    <input type="search" /> 
    <a href="#" id="advanced-search-button" class="btn btn-default"> 
     <i class="fa fa-search" ></i> 
    </a> 
    </fieldset> 
</form> 

И тогда вы можете просто написать:

$(document).ready(function() { 
    $('#advanced-search-button').click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    $('#AdvanceSearch').fadeIn(1000); 
    }) 
}); 

preventDefault и stopPropagation убедитесь, что это единственное действие, которое выполняется, когда ссылка (который будет выглядеть как кнопка) нажата.