wordpress - 添加工具搜索表单 - navwalker - Wordpress

Question

我想在我的导航中添加一个循环图标（字体真棒），如果我 clck ，搜索输入表单显示（切换效果）。

在 function.php 中，我添加了以下代码：

function add_search_form($items, $args) {
if( $args->theme_location == 'header-menu' )
$items .= '<li class="search menu-item menu-item-type-custom dropdown menu-item-object-custom"><a class="search_icon"><i class="fa fa-search"></i></a><div style="display:none;" class="searchform">'. get_search_form(false) .'</div></li>';
return $items;
}

jQuery(document).ready(function ($) {
    $(".search_icon").click(function () {
        $(".searchform").slideToggle();
    });

    $(document).keydown(function (e) {
        if (e.keyCode == 27) {
            //$(modal_or_menu_element).closeElement();
            $(".searchform").hide();
        }
    });
});

.searchform {
    display: block;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 1px;
    margin-right: 3rem;
    z-index: 9999;
    background: #fff;
    padding: 20px;
    background: #343a40;
    margin-top: -1px;
}
.container { position:relative;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<li class="search menu-item menu-item-type-custom dropdown menu-item-object-custom">
<a class="search_icon">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
<div style="display:none;" class="searchform">
<!-- search -->
<form class="search" method="get" action="example.com" role="search">
        <input class="search-input" type="search" name="s" placeholder="Que cherchez-vous ?">
        <button class="search-submit" type="submit" role="button">Ok !</button>
    </form>
<!-- /search -->
    </div>
</li>

我使用导航器。在我不使用 navwalker 并且此代码有效之前，但现在，当我单击图标时没有任何操作。

任何想法 ？

谢谢

标签： wordpressbootstrap-4font-awesomewp-nav-walker