Javascript 在小屏幕中切换搜索栏

我想使搜索栏切换时，在小屏幕上。应该是这样的

这是宽屏幕img

我是否需要添加任何参考或特定代码

<form class="expanding-search-form">              
          <input class="search-input" id="global-search" type="search" placeholder="Search">
          <div class="search-dropdown">
            <button class="button dropdown-toggle" type="button">
              <span class="toggle-active">Projects</span>
              <span class="ion-arrow-down-b"></span>
            </button>
            <ul class="dropdown-menu">
              <li class="menu-active"><a href="#">Projects</a></li>
              <li><a href="#">External Contact</a></li>
            </ul>
          </div>          
          <button class="button search-button" formaction="search-contact.html">
                    <span class="fa fa-search">
                          <span class="sr-only">Search</span>
                    </span>
              </button>
        </form>

$('.dropdown-toggle').click(function(e) {
          e.preventDefault();
          e.stopPropagation();
          $(this).closest('.search-dropdown').toggleClass('open');
        });

        $('.dropdown-menu > li > a').click(function(e) {
          e.preventDefault();
          var clicked = $(this);
          clicked.closest('.dropdown-menu').find('.menu-active').removeClass('menu-active');
          clicked.parent('li').addClass('menu-active');
          clicked.closest('.search-dropdown').find('.toggle-active').html(clicked.html());
        });

        $(document).click(function() {
          $('.search-dropdown.open').removeClass('open');
        });

项目




搜寻
$（'.dropdown toggle'）。单击（函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（this）.closest（'.search下拉列表'）.toggleClass（'open'）；
});
$（'.下拉菜单>li>a'）。单击（函数（e）{
e、 预防默认值（）；
var clicked=$（这个）；
单击.closest（'.dropdown menu'）。find（'.menu-active'）。removeClass（'menu-active'）；
单击.parent（'li'）.addClass（'menu-active'）；
clicked.closest（'.search下拉列表'）.find（'.toggle active'）.html（clicked.html（））；
});
$（文档）。单击（函数（）{
$（'.search dropdown.open'）.removeClass（'open'）；
});

将代码更改为：

<form class="expanding-search-form" >              
          <input class="search-input" id="global-search" type="search" placeholder="Search">
           <button class="search-dropdown-button">
             <i class="fa fa-search"></i>
           </button>
           
          <div class="search-dropdown">
            <button class="button dropdown-toggle" type="button">
              <span class="toggle-active">Projects</span>
              <span class="ion-arrow-down-b"></span>
            </button>
            <ul class="dropdown-menu">
              <li class="menu-active"><a href="#">Projects</a></li>
              <li><a href="#">External Contact</a></li>
            </ul>
            <button class="button search-button" formaction="search-contact.html">
                    Search
              </button>
          </div>          
          
        </form>

---

您必须为

创建一个按钮。搜索下拉列表

并将其置于

之外。搜索下拉列表

并添加一些CSS进行切换。

这更适合使用CSS处理。它不会在小范围内切换screen@Tat单击搜索按钮时，

搜索下拉列表

切换（出现和消失）。您可以对较大屏幕使用媒体查询

.search-dropdown{
   display:none; 
 }
.search-dropdown.open{
  display:block;
}
.dropdown-menu.open{
  display:block;
  position:relative;
}

$('.dropdown-toggle').click(function(e) {
   e.preventDefault();
   e.stopPropagation();
   $(this).closest('.search-dropdown').find('.dropdown-menu').toggleClass('open');
 });

$('.search-dropdown-button').click(function(e) {
   e.preventDefault();
   e.stopPropagation();
   $('.search-dropdown').toggleClass('open');
});

$('.dropdown-menu > li > a').click(function(e) {
   e.preventDefault();
   var clicked = $(this);
   clicked.closest('.dropdown-menu').find('.menu-active').removeClass('menu-active');
   clicked.parent('li').addClass('menu-active');
   clicked.closest('.search-dropdown').find('.toggle-active').html(clicked.html());
 });

$(document).click(function() {
   $('.search-dropdown.open').removeClass('open');
 });