Javascript 使用jquery隐藏和取消隐藏搜索div

我正在制作一个网站，其中导航栏中有一个搜索图标。当用户单击搜索图标时，它应该使用“hide”类隐藏自己，还应该从搜索栏div中删除hide类。我使用jQuery进行了此操作，但它不起作用。我该怎么办

这是我的密码-

引导CSS-

身体-

JS-

$（“#导航栏搜索”）。在（'click'，function（）上{
$（this.addClass（'hide'）；
$（“#导航栏搜索栏”）.removeClass（'hide'）；
});

问题在于您的图标位于锚元素内，单击图标会触发锚元素的默认单击性质

您需要防止这种情况，可以通过调用

event.preventDefault（）

$（“#导航栏搜索”）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（this.addClass（'hide'）；
$（“#导航栏搜索栏”）.removeClass（'hide'）；
});





您不需要创建类。只需使用：

$('#navbar-search').hide()
// AND
$('#navbar-search').show()

或者，如果要切换：

$('#navbar-search').toggle()

另外，您正在将类“hide”添加到#navbar search中，然后尝试将其从#navbar search中删除。您需要对两者使用相同的id，否则这将不起作用

如果我没弄错的话，这就是你的代码：

$('#navbar-search').click(function(){
      $('#navbar-searchbar').toggle()
})

使用隐藏类或可见类，例如：

这个div只在xs中可见
在上一个代码段中，您正在添加class
hide
，下一个语句是删除同一个类，我认为它没有任何逻辑。您需要防止锚元素
$（'#导航栏搜索'）的默认单击操作。on（'click'，函数（e）{e.preventDefault（）；$（this）。addClass（'hide'））$（“#导航栏搜索栏”）.removeClass（'hide'）；}