0

我正在尝试显示一个 div 块以搜索目录中的项目。实际上，我有与此处相同的结果（http://demos.sshopwp.com/），但我需要删除搜索符号上的下拉效果并通过鼠标单击替换它。我目前的想法是添加一个能够覆盖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;
}

还有其他想法吗？谢谢！！

4

1 回答 1

0

假设您在将鼠标悬停在它上面时可以正常工作，您可以将图标放在锚标记中并在锚标记上使用 :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;
}
于 2018-07-06T19:02:07.167 回答