Question

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

$(document).ready(function(){
  $( 'a' ).mouseout(function(){
    $('.info_span1').hide();$('.info_span2').hide();
  });
  
    $('a').mouseenter(function(){
        var position = $(this).position();
        $(".info_span1").show();$(".info_span2").show();
        $(".info_span1").text($(this).data("title1"));
        $(".info_span2").text($(this).data("title2"));
        $(".info_span1").css({top: $(this).height()+10, left:position.left, position:'absolute'});
        $(".info_span2").css({top: $(this).height()+10, left:position.left+$(this).width()-60, position:'absolute'});
       
    });
});

Answer 1

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

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

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

Answer 2

使用此脚本。

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

或者这个。

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

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

2 个答案: