Question

我正在尝试使用ul和li制作一个下拉菜单，以便我可以应用样式。

我目前遇到的问题是，我希望能够点击Select an option框以关闭菜单以及页面上的任何其他位置。

从本质上讲，我希望它像普通select框一样执行，但可以设置样式。

这是我的代码：

HTML

<div id="section">
    <div class="container">
        <ul class="dropdown">
            <li>
                <div class="value">
                    <span class="text">Select an Option</span>
                </div>

                <ul class="list">
                    <li>Option 1</li>
                    <li>Option 2</li>
                    <li>Option 3</li>
                    <li>Option 4</li>
                    <li>Option 5</li> 
                    <li>Option 6</li> 
                    <li>Option 7</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

#section .container .value {
    padding: 0;
}

#section .container span {
    color: #666;
    cursor: pointer;
    height: 30px;
}

#section .container .text {
    padding-left: 15px;
}

#section .list li {
    padding-left: 15px;
}

#section .list li:hover,
#section .list li:focus,
#section .list li:active {
    cursor: pointer;
    background: #000;
    color: #FFF;
}

#section .container {
    height: 100%;
    width: 260px;
    border: 1px solid grey;
}

#section .container ul {
    position: relative;
}

#section .container ul li {
    position: relative;
    cursor: pointer;
}

#section .container li ul {
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    display: none;
    outline: 1px solid #bebebe;
}

#section .container ul .value {
    position: relative;
}

JS

$('.container').on('click', function(e) {
    $('.list').show();
    e.stopPropagation();
});
$(document).on('click', function() {
    if ($('.list').is(':visible')) {
        $('.list', this).hide();
    }
});

小提琴

http://jsfiddle.net/xareyo/t2Ltm/4/

感谢您的时间！

Answer 1

$('.container .list li').on('click', function (e) {
    $(this).parent().prev().find('.text').text($(this).text());
});
$(document).on('click', function () {
    if ($('.list').is(':visible')) {
        $('.list', this).hide();
    }
});

演示：Fiddle

Answer 2

根据我的理解你的问题，试试这个

$('.container').on('click', function(e) {
    if ($('.list').is(':visible')) {
        $('.list', this).hide();
    }
    else{
      $('.list').show();
      e.stopPropagation();
    }
});

Demo

jQuery可点击样式下拉列表，单击关闭

2 个答案: