如何在引导导航栏中隐藏元素？答案

【问题标题】：How do you hide elements within a bootstrap navbar?如何在引导导航栏中隐藏元素？
【发布时间】：2015-07-22 09:41:55
【问题描述】：

这似乎是一件非常标准的事情，但我无法让它发挥作用。我想在我的导航栏中有一个登录表单，然后能够在用户单击登录按钮时隐藏用户/密码字段。我无法隐藏任何元素，它们只是立即重新出现。我尝试使用 JQuery 的 hide() 方法，并将“隐藏”类添加到元素中。至少在 Chrome 中，它会闪烁并且元素仍然存在。这是一个简单的演示来说明这一点：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Demo</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <form class="navbar-form navbar-left" role="search">
        <div id="remove_me" class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button id='the_button' class="btn btn-default">Submit</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

  <script>
    $('#the_button').click(function() {
      $('#remove_me').addClass('hidden');
  });
  </script>
</body>
</html>

【问题讨论】：

标签： javascript jquery twitter-bootstrap navbar

【解决方案1】：

问题是当您单击提交按钮时页面正在刷新，因为它正在发送表单。这就是输入字段再次可见的原因。

您可以使用 preventDefault 来避免发送表单并为表单进行 ajax 调用。

<script>
$('#the_button').click(function(e) {
    $('#remove_me').addClass('hidden');
    e.preventDefault();
});

【讨论】：

谢谢！由于该按钮不属于“提交”类，我认为它不能提交表单。不过这行得通。

【解决方案2】：

使用这个脚本。

<script>
$('#the_button').click(function() {
  $('#remove_me').hide();
});
</script>

或者这个。

<script>
$('#the_button').click(function() {
  $('#remove_me').css("display", "none");
});
</script>

【讨论】：