Question

我试图用css和jquery显示一个隐藏的div：实际上我有下一个代码：

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

我想按下按钮AdvanceServiceButton时显示我的div AdvanceSearch。

    <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确保这是单击链接（看起来像按钮）时执行的唯一操作。

我如何用jquery显示和隐藏表单？

1 个答案: