Question

几天后，我通过谷歌搜索方式来创建具有样式的下拉内存，就像mac风格一样。我不知道这有可能吗？我找到了一些例子并试验了它们，但没有一个能够奏效。这是一个例子：http://thephuse.com/development/custom-styling-for-select-menus/。我真的需要这个工作，所以有人可以帮助我！

编辑：这就是我的尝试：

JS

function customStyle(options) {
return options.each(function() {
    var currentSelected = $(this).find(':selected');
    $(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+currentSelected.text()+'</span></span>').css(
            {
                position:'absolute', opacity:0,fontSize:12
            });

    var selectBoxSpan = $(this).next();
    var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));            
    var selectBoxSpanInner = selectBoxSpan.find(':first-child');

    selectBoxSpan.css({display:'inline-block'});
    selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});

    var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
    $(this).height(selectBoxHeight).change(function() {
        selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');
    });

}）; }

这就是它所谓的：

$('#macStyle').click(function() {
    customStyle($(this));
});

HTML

<select class="styled" id="macStyle">
    <option>one</option>
    <option>two</option>
    <option>something</option>
    <option>4</option>
    <option>5</option>
</select>

CSS

span.customStyleSelectBox { 
font-size:11px; 
background-color: #f5f0de; 
color:#7c7c7c; padding:5px 7px; 
border:1px solid #e7dab0; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border-radius: 5px 5px; 
line-height: 11px;

}

span.customStyleSelectBox.changed { 
    background-color: #f0dea4; 
}

出于某种原因，下拉菜单现在显示在方框上但在其下方，就像正常下拉菜单一样。

Answer 1

我已经设法创造了我想要的东西。我正在向遇到同样问题的人分享这些信息：

<强> HTML

    <ul id="t">
    <li>
        Sub-Item #1
        <ul id="options_t">
            <li>Sub-Item #1</li>
            <li>Sub-Item #2</li>
            <li>Sub-Item #3</li>
        </ul>
    </li>
</ul>

<强> JS

$('#t').click(function() {
$(this).find('ul').css('display', 'block');
$(this).find('li').css('display', 'block');

$(this).find("ul li.text_color").removeClass("text_color");
$(this).find("ul li:first").addClass("text_color");
});

$('#t').focusout(function() {
    $(this).find('ul').css('display', 'none');
});

/* Needed so to be able to use focusout event */
$('#t').attr('tabIndex', -1);

$('#options_t li').click(function(e) {
   $(this).parent().find('li.text_color').removeClass('text_color');
   $(this).addClass('text_color');

   e.stopImmediatePropagation();
});

<强> CSS

ul > li {
display: block; 
float: left; 
margin-right: 10px; 
position: relative; 
background: wight; 
padding: 0.5em; 
line-height: 1em;
width: 80px;

border: 1px solid black;
}

ul ul {
    display: none; 
    width: 100px; 
    position:absolute; 
    top: -1px; 
    left: -41px;
}

ul ul > li {
    float: none; 
    background: white;
    display: none;
}

#t {
    position:absolute;
    top: 50px;
    left: 50px;
  }

.text_color {
    background: gray;
}

我希望这会有所帮助！如果有人有改进建议，欢迎分享。

使用mac风格创建下拉菜单

1 个答案: