将图标放入搜索栏

时间:2017-01-26 21:38:47

标签: html css twitter-bootstrap search icons

我只想在我的导航栏中找到一个搜索图标,但我希望在点击搜索图标时下拉搜索栏我不知道我在做什么使用此代码:

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">

        <a href="#navs" class="dropdown-toggle" data-toggle="dropdown">
            <span style="color:white" class="glyphicon glyphicon-search"/>
        </a>

        <ul class="dropdown-menu" role="menu">
            <li>
                <input type="hidden" name="cx" />
                <input type="hidden" name="ie" value="UTF-8" />
                <input type="text" name="q" size="25" />
                <input type="submit" name="sa" value="Search" />


            </form>
        </li>
    </ul>
</li>
</ul>
</div>
</div>

1 个答案:

答案 0 :(得分:1)

你可以使用jquery吗?创建.dropdown-menu { display: none; }然后使用jquery并执行以下操作:

$(document).ready(function(){
  $(".dropdown-toggle").click(function(){
    $(".dropdown-menu").toggle();
  });
});