Question

我正在尝试显示一个div块，以便在目录中搜索项目。实际上，我具有与此处（http://demos.sshopwp.com/）相同的结果，但是我需要删除搜索符号上的下拉效果，并用mouseclick替换它。我当前的想法是添加一个能够覆盖CSS效果但无法正常工作的js代码。

HTML代码：

<div class="header-shop__icon search-icon has-dropdown">
                        <a href=""><span id="search-on"
                            class="shop__icon fa fa-search"></span></a>
                        <div class="header-dropdown">
                            <form class="top-search-form header-dropdown-inner">
                                <div class="input-group" id="search-div">
                                    <input type="text" class="form-control clearable"
                                        id="search-string" placeholder="Search..."
                                        aria-describedby="basic-addon2" size="100">
                                    <button id="search-item" class="btn btn-secondary"
                                        type="submit">Search Item</button>
                                </div>
                            </form>
                        </div>
                    </div>

JS代码：

$jq('#search-on').on('click', function(event) {

    event.preventDefault();

    $jq(".header-dropdown").css('style1', 'overflow: visible !important;');

});

CSS：

.header-shop__icon .header-dropdown {
    display: hide;
    position: absolute;
    top: 100%;
    margin-top: -2px;
    z-index: 9;
    max-height: 0px;
    overflow: hidden;
    text-align: left;
    -webkit-transition: all 0.5 ease-in-out;
    -moz-transition: all 0.5 ease-in-out;
    transition: all 0.5 ease-in-out;
}

还有其他想法吗？谢谢！

Answer 1

假设您将鼠标悬停在上面时可以工作，则可以将图标放在锚标记中，并在锚标记上使用：active伪类，而不是图标上的：hover伪类。

或者，只需在选择器中使用其他类定义要动态放入框的CSS，然后在单击图标或远离图标时使用JS切换该类。像这样：

JS：

$jq('#search-on').on('click', function(event) {
    event.preventDefault();
    $jq(".header-dropdown").addClass("visible");
});

CSS：

.header-shop__icon .header-dropdown {
    display: hide;
    position: absolute;
    top: 100%;
    margin-top: -2px;
    z-index: 9;
    max-height: 0px;
    overflow: hidden;
    text-align: left;
    -webkit-transition: all 0.5 ease-in-out;
    -moz-transition: all 0.5 ease-in-out;
    transition: all 0.5 ease-in-out;
}
.header-shop__icon .header-dropdown.visible {
    overflow: visible !important;
}

通过鼠标单击显示/隐藏div搜索下拉菜单

1 个答案: