0

我有一个下拉列表，我没有使用 HTML 选择元素，我使用 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>
4

3 回答 3

0

您需要在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()来停止传播。

于 2013-08-20T10:53:18.260 回答
0

用这个

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

访问这个了解更多

于 2013-08-20T11:06:14.497 回答
0

尝试

$(document).on('click', function(){
    if($(e.target).closest('.final_dates_container').length == 0){
        //clicked outside
    }
})
于 2013-08-20T10:50:48.147 回答