切换按钮以更改文本、图标和显示搜索栏

Question

我确实有一个带导航栏的 header。 导航包括一个搜索按钮，每次单击该按钮应将单词从“搜索”更改为“关闭搜索”，并打开最初未显示在导航栏下方的搜索栏。 我用.html, .text 尝试了不同的方法，但搜索按钮中的文本有时有效，而其他无效。 我尝试了不同的方法，但并不一致。 每次我单击“搜索”按钮时，它都应该更改文本并打开和关闭搜索栏，而不仅仅是一次。 我也尝试使用切换（）。 我在按钮和搜索栏的代码下方粘贴。

此外，搜索按钮应显示一个搜索图标，由 class“btn-search-icon”定义，一旦搜索栏关闭并且按钮显示“关闭搜索”文本，该图标就会消失。 下面的搜索栏有一个“搜索”字段、提交按钮和一个取消按钮。 取消按钮应删除搜索字段中的值。 此步骤有效，但它会重新加载页面，因此它会关闭搜索栏，而它应该保持打开状态。

有任何想法吗？ 我很感激任何帮助。

HTML：

   <button class="bg-btn btn-search btn-search-icon" id="searchBtnBar" type="submit" value="true">Search</button>
    div class="container search-bar-container">
    <form id="bgSearchBar">
       <input type="search" name="searchfield" value="Search" class="searchField">
       <button class="bgsearchbtn">Search <i class="fa-solid fa-arrow-right"></i></button>
       <button class="bgcancelhbtn"></button>
    </form>
    </div>

JQuery：

$('#bgSearchBar').hide();
$("#searchBtnBar").click(function () {
   $(this).fadeOut(function () {
       $(this).text(($(this).text() == 'Search') ? 'Close Search' : 'Search').fadeIn();
   })
 
   $(this).toggleClass('btn-search-icon');
   $('#bgSearchBar').fadeIn();
})

$(".bgcancelhbtn").on("click", function(event) {
  $(".searchField").val("");
});

Answer 1

我试图做最小的改变，所以它会起作用。

 $('#bgSearchBar').hide(); $("#searchBtnBar").click(function() { var flag = ($(this).text() == 'Search'); $(this).fadeOut(function() { $(this).text(flag? 'Close Search': 'Search').fadeIn(); }) $(this).toggleClass('btn-search-icon'); if (flag) { $('#bgSearchBar').fadeIn(); } else { $('#bgSearchBar').fadeOut(); } }) $(".bgcancelhbtn").on("click", function(event) { $(".searchField").val(""); });

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <button class="bg-btn btn-search btn-search-icon" id="searchBtnBar">Search</button> <div class="container search-bar-container"> <form id="bgSearchBar"> <input type="search" name="searchfield" value="Search" class="searchField"> <button class="bgsearchbtn">Search <i class="fa-solid fa-arrow-right"></i></button> <button class="bgcancelhbtn" onclick="this.closest('form').reset(); return false">Cancel</button> </form> </div>