码

Question

在上图中，我标记了输入字段占用的空间（具有隐藏的可见性）。

我想要的是删除该空间并仅在用户点击时使用它 search icon（我的search icon将出现在右侧，接下来到用户图像）

码

html

<div id="searchbtn"><span class="fas fa-search"></span></div> //search icon

                <form class="form-inline" action="/search" target="_blank" method="GET" role="search">
                    {{ csrf_field() }}

                    <div class="navfix">
                        <div id="navfix2">
                            <div id="search" class=" hide"> //search id
                                <div class="input-group-icon"> //input field
                                    <input type="text" name="q" class="single-input" autocomplete="off" placeholder="Search in blog... 'type + enter' " required class="single-input">
                                    <div id="searchremovebtn" class="icon"><i class="far fa-window-close"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>

css

.hide{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear;
}
.show{
    visibility: visible;
    opacity: 1;
    transition: visibility 1s, opacity 1s linear;
}
.navfix {
  position:relative;
  margin-right: 0;
}
.navfix2 {
  position:absolute;
}

jQuery

// search script
$(document).ready(function() {
var trig = 1;
//fix for chrome
$("#search").addClass('hide');
  //animate searchbar width increase to  +150%
  $('#searchbtn').click(function(e) {
       //handle other nav elements visibility here to avoid push down 
    $('#search').removeClass('hide');
    $('#search').addClass('show');
    $('#searchbtn').removeClass('show');
    $('#searchbtn').addClass('hide');
   if (trig == 1){
      $('#navfix2').animate({
        width: '+=150',
        marginRight: 0
      }, 100);

     trig ++; 
     }
  });
  // if user leaves the form the width will go back to original state
  $("#searchremovebtn").click(function() {
      $('#navfix2').animate({
      width: '-=150'
    }, 100);
   trig = trig - 1;
    //handle other nav elements visibility first to avoid push down
        $('#search').removeClass('show');
        $('#search').addClass('hide');
        $('#searchbtn').addClass('show');
        $('#searchbtn').removeClass('hide');
  });
});
                </div>
                </form>

Answer 1

visibility: collapse;将有效。

Answer 2

改为使用display无。

.hide{
    display: none;
}
.show{
    display: block; // or display: inline-block depends on your needs.
}

根据"kemiller2002"

display：none表示相关标签根本不会出现在页面上（尽管您仍然可以通过dom与它进行交互）。其他标签之间不会为它分配空间。

visibility：hidden表示与display：none不同，标签不可见，但在页面上为其分配了空间。标记已呈现，只是在页面上看不到。

更多信息here

用css删除隐藏的div空间

码

2 个答案: