Jquery 如何通过点击图标使div在整个屏幕上移动？

HTML:

JavaScript:

.hidden{

 display: none; 
 }
 input{
 border-radius: 5px;
 margin-top: 5px;
 width: 300px;
 height: 33px;
 margin-right: 10px;
 }
.search-dropdown{
 background-color: black;
 width: 100%; 
 border-radius: 5px;

 }

这段代码看起来是这样的：5个图标，当用户点击magnyfying玻璃时，搜索框出现在所有图标上方的左侧，不会在屏幕上延伸（它后面的div），我将其变为黑色以帮助我提供参考。它将只延伸到图标的末端。我需要帮助

。这就是我希望它有点像的：当你点击放大按钮时，它会弹出。我当前的迭代在正确的位置，（搜索框）只需要一个像url中那样的背景div就可以了

更多css

$(document).ready(function(){

    $('#search-bar').click(function(){
        $(this).siblings('.search-dropdown').toggleClass('hidden');
         });
     });  

---

在css规则中，您特别将输入宽度设置为300px。如果你想让它延伸整个宽度，就让它100%。比如：？我以前做过，搜索栏（宽度100%）只延伸到图标的末端，因为图标本身就是div。任何其他设置代码的方法，jquery代码在html中都不起作用。我也感谢你的帮助@JME11所以我想出了如何让它穿过屏幕。但是，如果不让图标向下推，我如何让div向上推，这样它就不会出现在屏幕右侧其他图标的前面呢@jme11

$(document).ready(function(){

    $('#search-bar').click(function(){
        $(this).siblings('.search-dropdown').toggleClass('hidden');
         });
     });  

 .topleft {
 background-color: transparent;
 margin: 1rem 0 0 0;
 position: absolute;
 top: 0;
 left: 0;
 font-size: 1.8rem;
 letter-spacing: .18rem;
 font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
 text-transform: uppercase;
 color: #ccc;
  }

  /* line 14, ../sass/_navigation.scss */
  .topleft a {
  color: #FF4247;
  }

  /* line 15, ../sass/_navigation.scss */
  .topleft a:hover {
  color: #FF4247;
  }

  /* line 19, ../sass/_navigation.scss */
  .topleft-social-container {
  padding: 1rem 0 0 3rem;
  }

  /* line 23, ../sass/_navigation.scss */
   .topleft i {
   font-size: 3.5rem;
   letter-spacing: 0.2rem;
   padding: 0.5rem;
   transition: .25s all;
   }

     /* line 30, ../sass/_navigation.scss */
    .topleft i:hover {
    opacity: 0.5;
    transition: .25s all;
    }