时间戳

首页 > 解决方案 > 使用jQuery的下拉隐藏显示

javascript - 使用jQuery的下拉隐藏显示

问题描述

我想在点击而不是悬停时显示搜索和购物车小部件，因为您在这里查看https://joomlance.com/

我使用了这个 Javascript 代码：

jQuery(document).ready(function() {
    jQuery('body').click(function(e) {
        var container = jQuery(".woodmart-search-dropdown");

        // if the target of the click isn't the container nor a descendant of the container
        if (!container.is(e.target) && container.has(e.target).length === 0) 
        {
            console.log("as Menu");
            container.hide();
        } 
    });

    jQuery('.search-button').click(function(e) {
        jQuery('div.woodmart-search-dropdown').toggle();
        console.log("Opened Menu");
        e.stopPropagation();
    });
});

但这效果不好，当尝试写任何东西时它会隐藏搜索小部件，当点击删除产品图标时它会隐藏卡片小部件，我不处理粘性标题

请问我该怎么做？

标签： javascriptjquerywordpress-theming

解决方案

如果我理解正确，您不需要此代码：

jQuery('body').click(function(e){ ....

因为它至少在每次点击正文后都会隐藏容器（同样当您专注于搜索输入时）。

试着用这个：

$(function(){

  var container = $('.woodmart-search-dropdown');


  $('.search-button').on('click', function(e) {
      container.toggle();
  });

});

推荐阅读