Question

我有一个下拉列表我没有使用HTML select元素，我使用UL构建它。它现在工作正常但我有一个问题，如果我点击下拉它将向下滑动，当我选择一个元素时它会向上滑动。如果我单击列表的div（不选择任何元素），我想要将列表滑动。我想知道我是否可以使用一些JQuery来做它但我不知道如何将这种情况与JQuery事件监听器联系起来？有人可以帮我吗？这是我的js文件：

$('.final_dates_list li').live('click',function(){
    id = $(this).attr("id");
    if(id == 'current')
    {
        $("#dates_list").find("li").each(function(){
            //alert($(this).attr("id"));
            $(this).show();
            $(this).slideDown('slow');
        });
    }
    else
    {
        this_id = $(this).attr("id");

        $("#dates_list").find("li").each(function(){
            //alert($(this).attr("id"));
            $(this).hide();
            $(this).slideUp('slow');
        });
        $("#dates_list").find("#current").show();
    }
});

的CSS：

div.final_dates_container ul.final_dates_list
{
    float:right;
    margin:0px;
    padding:0px;
    width:100px;
    line-height: 21px;
    overflow: hidden;
    border: 1px solid #27292c;
    border-radius: 4px;
    background: url('bg.png') no-repeat right #494849;
    box-shadow:inset 0 0 1px #393939;
    -moz-box-shadow:inset 0 0 1px #393939;
    -webkit-box-shadow:inset 0 01px #393939;
    list-style-type:none;
    color:#fff;
    font-size:0.8em;
    text-align:center;
    font-weight:bold;
    position:relative;
    z-index:9999;
}
div.final_dates_container ul.final_dates_list li:hover
{
    text-decoration:underline;
    cursor:pointer;
}
div.final_dates_container ul.final_dates_list li
{
    border-top:1px solid #eee;
}

HTML：

<div class="final_dates_container">
    <table border="1">
        <tr>
            <td>
                <ul id="dates_list" class="final_dates_list">
                    <li id='current'>0</li>
                    <li id='-6' style='display:none'>-6</li>
                    <li id='-5' style='display:none'>-5</li>
                    <li id='-4' style='display:none'>-4</li>
                    <li id='-3' style='display:none'>-3</li>
                    <li id='-2' style='display:none'>-2</li>
                    <li id='-1' style='display:none'>-1</li>
                    <li id='0' style='display:none'>0</li>
                    <li id='1' style='display:none'>1</li>
                    <li id='2' style='display:none'>2</li>
                    <li id='3' style='display:none'>3</li>
                    <li id='4' style='display:none'>4</li>
                    <li id='5' style='display:none'>5</li>
                    <li id='6' style='display:none'>6</li>
                </ul>
            </td>
        </tr>
    </table>
</div>

Answer 1

尝试

$(document).on('click', function(){
    if($(e.target).closest('.final_dates_container').length == 0){
        //clicked outside
    }
})

Answer 2

您需要在document本身上放置一个事件处理程序，然后检查事件的目标是否是您要隐藏的元素。试试这个：

$(document).on('mouseup', function(e) {
    var $list = $("#dates-list");    
    if (!$list.is(e.target) && $list.has(e.target).length === 0) {
        $list.slideUp('slow');
    }      
});

注意：我使用了mouseup，因为通常会有click个带有preventDefault()的hanlders来阻止传播。

Answer 3

使用这个

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

visit this for more

如果我在某个div之外点击，我可以获得一个活动吗？

HTML：

3 个答案: