Question

我用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);
    }

});

该如何解决下拉菜单？

Answer 1

尝试一下

newDeck.getHistogram ( numberOfCards );

System.arraycopy ( newDeck, cardsDealtTotal, dealtDeck, 0, howManyCards);

String[] histogramDeck = dealCards ( numberOfCardsDealt );

$(".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).on('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);
    }

});

$(document).mouseup(function (e)
                    {
  var container = $(".hida");

  if (!container.is(e.target) 
      && container.has(e.target).length === 0)
  {
    $(".dropdown dd ul").hide();
  }
});

Answer 2

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

单击任何地方时WordPress隐藏下拉菜单

2 个答案: