使用jquery隱藏和取消隱藏搜索div

我正在製作一個網站，其中我在導航欄中有一個搜索圖標。 my search icon當用戶點擊搜索圖標時，它應該使用「隱藏」類隱藏自己，它也應該從搜索欄div中刪除隱藏類。 my search bar div我做了使用jQuery，但它不工作。我該怎麼辦？使用jquery隱藏和取消隱藏搜索div

這裏是我的代碼 -

引導CSS-

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

正文 -

<li class="hvr-bounce-to-bottom" id="navbar-search"> 
<a href=""> 
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
</a> 
</li> 
<div class="input-group width-174px margin-top-8px hide" id="navbar-searchbar"> 
<input type="text" class="form-control width-100px" placeholder="Search"> 
<span class="input-group-btn"> 
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" id="navbar-search" aria-hidden="true"></span></button> 
</span> 
</div>

JS-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="bootstrap/js/bootstrap.min.js"></script> 
<script src="custom.js"></script>

$('#navbar-search').on('click', function(){ 
$(this).addClass('hide'); 
$('#navbar-searchbar').removeClass('hide'); 
});

來源

2017-02-23 Master Adit

在你的最後一段代碼片段中，你正在添加'hide'類和下一個語句，你將刪除同一個類，我不認爲它會生成任何邏輯。 –

您需要防止錨元素'$（'＃navbar-變奏（'click'，function（e）{e.preventDefault（）; $（this）.addClass（'hide'）; $（'＃navbar-searchbar'）。removeClass（'hide'）; }）; ' –

的問題是你的圖標是一個錨元素中，就可以觸發錨元素的默認點擊性質的圖標點擊。

您需要防止的是，你可以通過調用event.preventDefault()

$('#navbar-search').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $(this).addClass('hide'); 
 
    $('#navbar-searchbar').removeClass('hide'); 
 
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css"> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css"> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script> 
 

 
<ul> 
 
    <li class="hvr-bounce-to-bottom" id="navbar-search"> 
 
    <a href=""> 
 
     <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
 
    </a> 
 
    </li> 
 

 
</ul> 
 
<div class="input-group width-174px margin-top-8px hide" id="navbar-searchbar"> 
 
    <input type="text" class="form-control width-100px" placeholder="Search"> 
 
    <span class="input-group-btn"> 
 
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" id="navbar-search" aria-hidden="true"></span></button> 
 
    </span> 
 
</div>

來源

2017-02-23 04:17:20

你並不需要創建一個類。只需使用：

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

或者，如果你想切換：

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

而且要添加類「隱藏」到＃導航欄搜索，然後試圖從導航欄＃，搜索欄將其刪除。你需要爲兩者使用相同的ID，否則這將無法正常工作。

所以，如果我得到這個權利，這將是你的代碼：

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

來源

2017-02-23 04:18:47 moorCode

使用隱藏的類或可見的類，例如：

這個div可見只是XS

來源

2017-02-23 05:03:16

使用jquery隱藏和取消隱藏搜索div

回答

相關問題