右对齐时,基于jQuery的下拉菜单不起作用
我有以下脚本,几乎完美地工作: HTML:右对齐时,基于jQuery的下拉菜单不起作用,jquery,html,css,Jquery,Html,Css,我有以下脚本,几乎完美地工作: HTML: <div class="menu"> <div class="navigation1">icon Home</div> <div class="dropdown"> <div class="items">icon Default 1</div> <div class="items">icon Reports 1</d
<div class="menu">
<div class="navigation1">icon Home</div>
<div class="dropdown">
<div class="items">icon Default 1</div>
<div class="items">icon Reports 1</div>
<div class="items">icon Other 1</div>
</div>
<div class="navigation2">icon Home</div>
<div class="dropdown">
<div class="items">icon Default 2</div>
<div class="items">icon Reports 2</div>
<div class="items">icon Other 2</div>
</div>
</div>
.menu {
position: relative;
background-color:silver;
font-family:Arial;
font-size:12px;
height:25px;
}
.navigation1 {
float:left;
padding:5px 10px 5px 10px;
cursor:pointer;
}
.navigation2 {
float:right;
padding:5px 10px 5px 10px;
cursor:pointer;
}
.navigation1::selection, .navigation2::selection { background:transparent; }
.navigation1::-moz-selection, .navigation2::-moz-selection { background:transparent; }
.navigation1:hover, .navigation2:hover {
background-color:gray;
}
.navigation1.active, .navigation2.active {
border:1px solid black;
border-bottom-color:white;
padding:4px 9px;
background-color: white;
position:relative;
z-index:1;
}
.dropdown {
display:none;
border:1px solid black;
border-bottom-width:2px;
background-color:white;
position:absolute;
top:24px;
padding:5px 10px;
cursor:pointer;
}
$(document).click(function(event) {
$('.navigation1.active, .navigation2.active').click();
$('.navigation1').removeClass("active");
});
$('.dropdown').each(function() {
$(this).css('left', $(this).prev().position().left);
});
$('.navigation1, .navigation2').click(function(event) {
$(this).siblings('.navigation1.active, .navigation2.active').click();
$(this).toggleClass('active').next().toggle();
event.stopPropagation();
});
$('.navigation1, .navigation2').disableSelection();
jQuery:
<div class="menu">
<div class="navigation1">icon Home</div>
<div class="dropdown">
<div class="items">icon Default 1</div>
<div class="items">icon Reports 1</div>
<div class="items">icon Other 1</div>
</div>
<div class="navigation2">icon Home</div>
<div class="dropdown">
<div class="items">icon Default 2</div>
<div class="items">icon Reports 2</div>
<div class="items">icon Other 2</div>
</div>
</div>
.menu {
position: relative;
background-color:silver;
font-family:Arial;
font-size:12px;
height:25px;
}
.navigation1 {
float:left;
padding:5px 10px 5px 10px;
cursor:pointer;
}
.navigation2 {
float:right;
padding:5px 10px 5px 10px;
cursor:pointer;
}
.navigation1::selection, .navigation2::selection { background:transparent; }
.navigation1::-moz-selection, .navigation2::-moz-selection { background:transparent; }
.navigation1:hover, .navigation2:hover {
background-color:gray;
}
.navigation1.active, .navigation2.active {
border:1px solid black;
border-bottom-color:white;
padding:4px 9px;
background-color: white;
position:relative;
z-index:1;
}
.dropdown {
display:none;
border:1px solid black;
border-bottom-width:2px;
background-color:white;
position:absolute;
top:24px;
padding:5px 10px;
cursor:pointer;
}
$(document).click(function(event) {
$('.navigation1.active, .navigation2.active').click();
$('.navigation1').removeClass("active");
});
$('.dropdown').each(function() {
$(this).css('left', $(this).prev().position().left);
});
$('.navigation1, .navigation2').click(function(event) {
$(this).siblings('.navigation1.active, .navigation2.active').click();
$(this).toggleClass('active').next().toggle();
event.stopPropagation();
});
$('.navigation1, .navigation2').disableSelection();
问题:
<div class="menu">
<div class="navigation1">icon Home</div>
<div class="dropdown">
<div class="items">icon Default 1</div>
<div class="items">icon Reports 1</div>
<div class="items">icon Other 1</div>
</div>
<div class="navigation2">icon Home</div>
<div class="dropdown">
<div class="items">icon Default 2</div>
<div class="items">icon Reports 2</div>
<div class="items">icon Other 2</div>
</div>
</div>
.menu {
position: relative;
background-color:silver;
font-family:Arial;
font-size:12px;
height:25px;
}
.navigation1 {
float:left;
padding:5px 10px 5px 10px;
cursor:pointer;
}
.navigation2 {
float:right;
padding:5px 10px 5px 10px;
cursor:pointer;
}
.navigation1::selection, .navigation2::selection { background:transparent; }
.navigation1::-moz-selection, .navigation2::-moz-selection { background:transparent; }
.navigation1:hover, .navigation2:hover {
background-color:gray;
}
.navigation1.active, .navigation2.active {
border:1px solid black;
border-bottom-color:white;
padding:4px 9px;
background-color: white;
position:relative;
z-index:1;
}
.dropdown {
display:none;
border:1px solid black;
border-bottom-width:2px;
background-color:white;
position:absolute;
top:24px;
padding:5px 10px;
cursor:pointer;
}
$(document).click(function(event) {
$('.navigation1.active, .navigation2.active').click();
$('.navigation1').removeClass("active");
});
$('.dropdown').each(function() {
$(this).css('left', $(this).prev().position().left);
});
$('.navigation1, .navigation2').click(function(event) {
$(this).siblings('.navigation1.active, .navigation2.active').click();
$(this).toggleClass('active').next().toggle();
event.stopPropagation();
});
$('.navigation1, .navigation2').disableSelection();
唯一的问题是右边的菜单,当它的下拉菜单下拉时,文本最终会换行,因为下拉菜单不够宽。如何根据其中的文本将下拉列表设置为正确的宽度,但允许它在左侧突出
基本上,对于左侧菜单,下拉菜单从菜单的右侧突出
对于右菜单,下拉菜单应该从菜单的左侧突出
jsFiddle:
<div class="menu">
<div class="navigation1">icon Home</div>
<div class="dropdown">
<div class="items">icon Default 1</div>
<div class="items">icon Reports 1</div>
<div class="items">icon Other 1</div>
</div>
<div class="navigation2">icon Home</div>
<div class="dropdown">
<div class="items">icon Default 2</div>
<div class="items">icon Reports 2</div>
<div class="items">icon Other 2</div>
</div>
</div>
.menu {
position: relative;
background-color:silver;
font-family:Arial;
font-size:12px;
height:25px;
}
.navigation1 {
float:left;
padding:5px 10px 5px 10px;
cursor:pointer;
}
.navigation2 {
float:right;
padding:5px 10px 5px 10px;
cursor:pointer;
}
.navigation1::selection, .navigation2::selection { background:transparent; }
.navigation1::-moz-selection, .navigation2::-moz-selection { background:transparent; }
.navigation1:hover, .navigation2:hover {
background-color:gray;
}
.navigation1.active, .navigation2.active {
border:1px solid black;
border-bottom-color:white;
padding:4px 9px;
background-color: white;
position:relative;
z-index:1;
}
.dropdown {
display:none;
border:1px solid black;
border-bottom-width:2px;
background-color:white;
position:absolute;
top:24px;
padding:5px 10px;
cursor:pointer;
}
$(document).click(function(event) {
$('.navigation1.active, .navigation2.active').click();
$('.navigation1').removeClass("active");
});
$('.dropdown').each(function() {
$(this).css('left', $(this).prev().position().left);
});
$('.navigation1, .navigation2').click(function(event) {
$(this).siblings('.navigation1.active, .navigation2.active').click();
$(this).toggleClass('active').next().toggle();
event.stopPropagation();
});
$('.navigation1, .navigation2').disableSelection();
所以首先,请检查一下
如果您看到了预期的结果,那么实现它的方法是为第二个下拉列表
div
提供第二个类,例如second
。然后创建一个css类。第二个{left:auto!important;right:0}
。那你应该很好。所以首先,请检查这个
如果您看到了预期的结果,那么实现它的方法是为第二个下拉列表
div
提供第二个类,例如second
。然后创建一个css类。第二个{left:auto!important;right:0}
。你应该很好。你不能对每个下拉列表使用相同的下拉类,你应该使用单独的类或id@oshirowanen你解决了你的问题吗?是的,但是,我对同一个脚本有另一个问题:你不能对每个下拉列表使用相同的下拉类,您应该使用分离类或id@oshirowanen你解决了你的问题吗?是的,但是,我对同一个脚本还有另一个问题: