如何隐藏 bootstrap 导航栏中的元素？

Question

这似乎是一件需要做的非常标准的事情，但我还没能让它发挥作用。我想要在我的导航栏中有一个登录表单，然后能够在用户单击登录按钮时隐藏 user/pass 字段。我无法隐藏任何元素，它们只是立即再次出现。我尝试使用 JQuery 的 hide() 方法，并将 'hidden' class 添加到元素中。至少在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>

Answer 1

使用这个脚本。

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

或者这个。

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

Answer 2

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

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

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

如何隐藏 bootstrap 导航栏中的元素？

How do you hide elements within a bootstrap navbar?

javascript

jquery

navbar

twitter-bootstrap