日期:2014-05-17  浏览次数:20742 次

JS+CSS 做下拉菜单背景问题

下面的代码是改变下拉菜单样式的,可以正常使用,但是现在有个问题就是下拉的内容很多,我想到一定高度就自动有滚动条,麻烦哪位兄弟帮我看看,感觉感谢。


<script language="JavaScript" type="text/javascript">
var selects = document.getElementsByTagName('select');

var isIE = (document.all && window.ActiveXObject && !window.opera) ? true : false;

function $(id) {
return document.getElementById(id);
}

function stopBubbling (ev) {
ev.stopPropagation();
}

function rSelects() {
for (i=0;i<selects.length;i++){
selects[i].style.display = 'none';
select_tag = document.createElement('div');
select_tag.id = 'select_' + selects[i].name;
select_tag.className = 'select_box';
selects[i].parentNode.insertBefore(select_tag,selects[i]);

select_info = document.createElement('div');
select_info.id = 'select_info_' + selects[i].name;
select_info.className='tag_select';
select_info.style.cursor='pointer';
select_tag.appendChild(select_info);

select_ul = document.createElement('ul');
select_ul.id = 'options_' + selects[i].name;
select_ul.className = 'tag_options';
select_ul.style.position='absolute';
select_ul.style.display='none';
select_ul.style.zIndex='999';
select_tag.appendChild(select_ul);

rOptions(i,selects[i].name);

mouseSelects(selects[i].name);

if (isIE){
selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"');window.event.cancelBubble = true;");
}
else if(!isIE){
selects[i].onclick = new Function("clickLabels3('"+selects[i].name+"')");
selects[i].addEventListener("click", stopBubbling, false);
}
}
}


function rOptions(i, name) {
var options = selects[i].getElementsByTagName('option');
var options_ul = 'options_' + name;
for (n=0;n<selects[i].options.length;n++){
option_li = document.createElement('li');
option_li.style.cursor='pointer';
option_li.className='open';
$(options_ul).appendChild(option_li);

option_text = document.createTextNode(selects[i].options[n].text);
option_li.appendChild(option_text);

option_selected = selects[i].options[n].selected;

if(option_selected){
option_li.className='open_selected';
option_li.id='selected_' + name;
$('select_info_' + name).appendChild(document.createTextNode(option_li.innerHTML));