3

我在 gmail 收件箱页面中看到了“更多操作”下拉框。它在列表中有级别和一些禁用的项目。

如何在 HTML+CSS 中做到这一点？

谢谢

4

4 回答 4

3

回应 Rob，不使用disabled的原因是IE。

这不是一个好主意的原因是IE在 IE6、IE7 或 IE8 中仍然不支持这一点。

http://webbugtrack.blogspot.com/2007/11/bug-293-cant-disable-options-in-ie.html

于 2008-11-29T18:12:36.463 回答
3

我一直在寻找类似的东西，这是我的解决方案。您需要图标来显示/隐藏、添加 css 和 javascript（本例中为 jquery）。它显示/隐藏菜单，但可以是 .hide div 中的任何内容。

CSS：

.shortasc { background: url("/css/asc.gif") no-repeat 50% 50%;cursor:pointer;}
.shortdesc { background: url("/css/desc.gif") no-repeat 50% 50%;cursor:pointer;}
.hide{ display:none;}
.toggle-menu .title {
text-align:left;
}

.toggle-menu div.more{
   position: absolute;
   border:#999999 1px solid;
   background-color:#FFFFFF;

}
.toggle-menu div.more ul{margin:0; padding:2px; text-align:left;}
.toggle-menu div.more ul li{list-style:none; padding:2px; border:#CCCCCC 1px solid;}

html 到 jquery 函数的调用：

<span class="toggle-menu">
<span class="title" onclick="$(this).win('togglewin');">titulo del menu</span><span class="orden shortasc">&nbsp;&nbsp;&nbsp;</span>
<div class="more hide">
<ul>
<li>Enlace 1</li>
<li>Enlace 2</li>
<li>and so on</li>
</ul>
</div>
</span>

将方法添加到 jquery 函数或编辑以在标题中添加 onClick 事件或创建您的函数，或者其他什么，这是一个带有 jquery 函数的示例http://docs.jquery.com/Plugins/Authoring#Getting_Started：

(function($) {
var methods={
//... your functions
togglewin:function(){
   var p = $(this).position();
  var parent = (this).closest('.toggle-menu');
  if(parent.find('.more').is(':visible')){
     parent.find('.orden').removeClass('shortdesc').addClass('shortasc');   
     parent.find('.more').slideUp();
  }else{
     parent.find('.orden').removeClass('shortasc').addClass('shortdesc');
     parent.find('.more').slideDown().offset( { top:p.top+12,left:p.left } );
 }
 return this;
}
};

$.fn.win = function(method) { 
  if ( methods[method] ) {
    return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
  } else if ( typeof method === 'object' || ! method ) {
    return methods.init.apply( this, arguments );
  } else {
   $.error( 'Method ' +  method + ' inexistente en jQuery.win' );
 }   
}

})(jQuery);

抱歉，我无法上传图片，但我喜欢这个结果。

于 2011-04-10T20:39:06.663 回答
2

您可以对 HTML 元素中的元素进行分组和禁用，<select>而无需使用 JavaScript。像下面这样的东西应该可以工作：

<select name="foo">
    <optgroup label="Odds">
        <option value="1">1</option>
        <option value="3">3</option>
        <option value="5">5</option>
    </optgroup>
    <optgroup label="Evens">
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="6" disabled="disabled">6</option>
    </optgroup>
</select>

对 Firebug 的简短检查表明，谷歌正在用一大堆 HTML 和一些巧妙的 CSS 来伪造他们的下拉框。就个人而言，我认为采用“正确”的方法并将其设计得更漂亮比在这里重新发明轮子更具可读性。

于 2008-11-29T17:00:08.950 回答
0

您想要一个基于无序列表的弹出/下拉菜单。

于 2008-11-29T16:59:15.440 回答