Javascript 单击任意位置时WordPress隐藏下拉列表

我用jQuery创建了一个多选下拉列表。有一个问题。当我点击下拉菜单时，它会打开，但在框外点击时，它不会隐藏

<dl class="dropdown" id="hiddenDiv" style="display:none"> 
<dt>
<li> 
    <span class="hida">ژانر فیلم<span>   
        <i style="display: block;position: absolute"></i>
</li>
</dt>
    <dd>
        <div class="mutliSelect">
            <ul>
            <li><label><input name="product_cat" value="action" type="checkbox"><span>action</span></label></li>
            <li><label><input name="product_cat" value="animation" type="checkbox"><span>animation</span></label></li>
            <li><label><input name="product_cat" value="history" type="checkbox"><span>history</span></label></li>
            <li><label><input name="product_cat" value="horror" type="checkbox"><span>horror</span></label></li>
            </ul>
        </div>
    </dd>
</dl>

ژانر فیلم   


行动
动画
历史
恐怖

这方面的jquery是：

$(".dropdown dt li").on('click', function() {
    $(".dropdown dd ul").slideToggle('fast');
});

$(".dropdown dd ul li a").on('click', function() {
    $(".dropdown dd ul").hide();
});

function getSelectedValue(id) {
    return $("#" + id).find("dt a span.value").html();
} 

$(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});

$('.mutliSelect input[type="select"]').on('click', function() {

    var title = $(this).closest('.mutliSelect').find('input[type="option"]').val(),
        title = $(this).val() + ",";

    if ($(this).is(':checked')) {
        var html = '<span title="' + title + '">' + title + '</span>';
        $('.multiSel').append(html);
        $(".hida").hide();
    } else {
        $('span[title="' + title + '"]').remove();
        var ret = $(".hida");
        $('.dropdown dt a').append(ret);
    }

});

$（“.dropdown dt li”）。在（'click'，function（）上{
$（“.dropdown dd ul”）.slideToggle（'fast'）；
});
$（“.dropdown dd ul li a”）。在（'click'，function（）上{
$（“.dropdown dd ul”）.hide（）；
});
函数getSelectedValue（id）{
返回$（“#”+id.find（“dta span.value”）.html（）；
} 
$（文档）.bind（'click'，函数（e）{
var$clicked=$（e.target）；
如果（！$clicked.parents（）.hasClass（“下拉菜单”）$（.dropdown dd ul”）.hide（）；
});
$（'.mutlise选择输入[type=“select”]”）。在（'click'，function（）上{
var title=$（this）.closest（'.mutliSelect'）.find（'input[type=“option”]'））.val（），
title=$（this.val（）+“，”；
如果（$（this）.is（':checked'））{
var html=''+title+''；
$（'.multiSel'）.append（html）；
$（“.hida”）.hide（）；
}否则{
$（'span[title=“”+title+“]”）。删除（）；
var ret=$（“.hida”）；
$（'.dropdown dt a'）.append（ret）；
}
});

我到底该怎么做才能修复我的下拉列表？

试试这个

$(document).click(function() {
    $(".dropdownc dd ul").hide();
});

$（“.dropdown dt li”）。在（'click'，function（）上{
$（“.dropdown dd ul”）.slideToggle（'fast'）；
});
$（“.dropdown dd ul li a”）。在（'click'，function（）上{
$（“.dropdown dd ul”）.hide（）；
});
函数getSelectedValue（id）{
返回$（“#”+id.find（“dta span.value”）.html（）；
} 
$（文档）。在（'单击'）上，函数（e）{
var$clicked=$（e.target）；
如果（！$clicked.parents（）.hasClass（“下拉菜单”）$（.dropdown dd ul”）.hide（）；
});
$（'.mutlise选择输入[type=“select”]”）。在（'click'，function（）上{
var title=$（this）.closest（'.mutliSelect'）.find（'input[type=“option”]'））.val（），
title=$（this.val（）+“，”；
如果（$（this）.is（':checked'））{
var html=''+title+''；
$（'.multiSel'）.append（html）；
$（“.hida”）.hide（）；
}否则{
$（'span[title=“”+title+“]”）。删除（）；
var ret=$（“.hida”）；
$（'.dropdown dt a'）.append（ret）；
}
});
$（文档）.mouseup（函数（e）
{
var容器=$（“.hida”）；
如果（！container.is）（即目标）
&&container.has（e.target）.length==0）
{
$（“.dropdown dd ul”）.hide（）；
}
});


ژانر فیلم   


行动
动画
历史
恐怖

dropdownc

来自哪里？你有一个类

下拉列表

，但没有

c

。我编辑了它…它不起作用。我使用woocommerce 3.4.2和wordpress 4.9.6。