这是我的一个简短形式的问题:我想要一个带有菜单的分裂按钮(用jquery-ui看看:jqueryui-demo,没有影响其他任何东西的定位。所以第二个按钮不应该移动,如果第一个分割按钮显示它的菜单,在jsfiddle中明显错误。我知道可以改变css中的position属性为绝对值,但我真的不想计算每个位置(如果某些内容发生变化或者document.size()发生变化,则重新计算...
有没有办法告诉jquery.menu它应该覆盖我的菜单?
jsfiddle归结为以下内容:
的JavaScript
$(function () {
$.each($(".key"), convert);
});
function convert(index, element) {
//retrieve button-value
var key = $(element).text();
//exchange elements html with the split-button and the menu
$(element).html(
'<div><div><button class="KeywordTag">' + key + '</button>
<button class="selectButton">Options</button></div>
<ul>
<li><a href="#" class="addtoquery">Add to Query</a></li>
<li><a href="#" class="opentab">Open in new Tab</a></li>
<li><a href="#" class="addtoquerytab">Add to Query in new Tab</a></li>
</ul></div>');
//call jquery.button(...) to turn the buttons into good looking buttons the the
//unordered list into a menu
//...
//add event handling
//...
}
CSS
//for round borders...
//I'd probably need to change the position attribute, but I really don't want to
//have to calculate each position by hand...
.KeywordTag {
-moz-border-topleft-radius: 75px;
-moz-border-bottomleft-radius: 75px;
-webkit-border-topleft-radius: 75px;
-webkit-border-bottomleft-radius: 75px;
border-bottom-left-radius:75px;
border-top-left-radius:75px;
}
.selectButton {
-moz-border-topright-radius: 75px;
-moz-border-bottomright-radius: 75px;
-webkit-border-topright-radius: 75px;
-webkit-border-bottomright-radius: 75px;
border-bottom-right-radius:75px;
border-top-right-radius:75px;
}
HTML 的
<!-- Those spans will be exchanged with
the actual buttons and menus by the javascript above -->
<span class="key">examplekey</span>
<span class="key">examplekey2</span>
答案 0 :(得分:2)
因为我今天早上解决了我的问题而且我想为其他人记录解决方案,我正在回答我自己的问题。
如果您将<ul>
定义为<ul style='position: absolute; z-index=1'>
,则会获得所需的行为。