我在我的css中有问题，位置:绝对不工作在ul.weekdaylist.溢出隐藏的问题，滑块工作正常，但ul列表不工作…请帮帮我....
<html>
<head>
<style>
.assemble_dayssec {
overflow: hidden;
width: 300px;
}
.assemble_dayswidth {
left: 0;
position: relative;
top: 0;
}
.weekdays {
cursor: pointer;
float: left;
margin-left: 1px;
padding-bottom: 2px;
position: relative;
width: 120px;
border-bottom: 1px solid hsl(0, 0%, 72%);
margin-left: 10px;
}
ul.weekdaylist {
border: 1px solid hsl(0, 0%, 82%);
display: none;
left: 0;
list-style: outside none none;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 18px;
z-index: 10;
}
ul.weekdaylist li {
font-size: 10px;
list-style: outside none none;
padding: 3px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.headtext').click(function() {
$(this).next('.weekdaylist').show();
});
var totalWidth = 0;
$(".weekdays").each(function(){
totalWidth = totalWidth + $(this).outerWidth(true);
});
var maxScrollPosition = totalWidth - $(".assemble_dayssec").outerWidth();
function toGalleryItem($targetItem){
if($targetItem.length){
var newPosition = $targetItem.position().left;
if(newPosition <= maxScrollPosition){
$targetItem.addClass("weekdays-active");
$targetItem.siblings().removeClass("weekdays-active");
$(".assemble_dayswidth").animate({
left : - newPosition
});
} else {
$(".assemble_dayswidth").animate({
left : - maxScrollPosition
});
};
};
};
$(".assemble_dayswidth").width(totalWidth);
$(".weekdays:first").addClass("weekdays-active");
$(".weekdays_controls-prev").click(function(){
var $targetItem = $(".weekdays-active").prev();
toGalleryItem($targetItem);
});
$(".weekdays_controls-next").click(function(){
var $targetItem = $(".weekdays-active").next();
toGalleryItem($targetItem);
});
});
</script>
</head>
<body>
<a class="weekdays_controls-prev" href="javascript:void(0);">Prev</a>
<a class="weekdays_controls-next" href="javascript:void(0);">Next</a>
<div class="assemble_dayssec">
<div class="assemble_dayswidth">
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a></li>
<li><a href="javascript:void(0);">SECOND</a></li>
<li><a href="javascript:void(0);">THIRD</a></li>
<li><a href="javascript:void(0);">RESET</a></li>
</ul>
</div>
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a></li>
<li><a href="javascript:void(0);">SECOND</a></li>
<li><a href="javascript:void(0);">THIRD</a></li>
<li><a href="javascript:void(0);">RESET</a></li>
</ul>
</div>
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a></li>
<li><a href="javascript:void(0);">SECOND</a></li>
<li><a href="javascript:void(0);">THIRD</a></li>
<li><a href="javascript:void(0);">RESET</a></li>
</ul>
</div>
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a></li>
<li><a href="javascript:void(0);">SECOND</a></li>
<li><a href="javascript:void(0);">THIRD</a></li>
<li><a href="javascript:void(0);">RESET</a></li>
</ul>
</div>
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a></li>
<li><a href="javascript:void(0);">SECOND</a></li>
<li><a href="javascript:void(0);">THIRD</a></li>
<li><a href="javascript:void(0);">RESET</a></li>
</ul>
</div>
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a></li>
<li><a href="javascript:void(0);">SECOND</a></li>
<li><a href="javascript:void(0);">THIRD</a></li>
<li><a href="javascript:void(0);">RESET</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
我在ul中有显示问题。工作日列表，位置:绝对不工作，请帮助我…
我认为assemble_dayssec溢出隐藏是一个问题，但我们必须使用溢出隐藏滑块，请帮助我
试试这个，你不需要绝对位置在这种情况下，它工作得很好，没有它。
$(document).ready(function() {
$('.headtext').click(function() {
$(this).next('.weekdaylist').show();
});
var totalWidth = 0;
$(".weekdays").each(function() {
totalWidth = totalWidth + $(this).outerWidth(true);
});
var maxScrollPosition = totalWidth - $(".assemble_dayssec").outerWidth();
function toGalleryItem($targetItem) {
if ($targetItem.length) {
var newPosition = $targetItem.position().left;
if (newPosition <= maxScrollPosition) {
$targetItem.addClass("weekdays-active");
$targetItem.siblings().removeClass("weekdays-active");
$(".assemble_dayswidth").animate({
left: -newPosition
});
} else {
$(".assemble_dayswidth").animate({
left: -maxScrollPosition
});
};
};
};
$(".assemble_dayswidth").width(totalWidth);
$(".weekdays:first").addClass("weekdays-active");
$(".weekdays_controls-prev").click(function() {
var $targetItem = $(".weekdays-active").prev();
toGalleryItem($targetItem);
});
$(".weekdays_controls-next").click(function() {
var $targetItem = $(".weekdays-active").next();
toGalleryItem($targetItem);
});
}); .assemble_dayssec {
overflow-y: hidden;
width: 300px;
overflow-x: visible;
}
.assemble_dayswidth {
left: 0;
position: relative;
top: 0;
float: left;
}
.weekdays {
cursor: pointer;
float: left;
margin-left: 1px;
padding-bottom: 2px;
position: relative;
width: 120px;
border-bottom: 1px solid hsl(0, 0%, 72%);
margin-left: 10px;
}
ul.weekdaylist {
border: 1px solid hsl(0, 0%, 82%);
display: none;
list-style: outside none none;
margin: 0;
padding: 0;
z-index: 10;
}
ul.weekdaylist li {
font-size: 10px;
list-style: outside none none;
padding: 3px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="weekdays_controls-prev" href="javascript:void(0);">Prev</a>
<a class="weekdays_controls-next" href="javascript:void(0);">Next</a>
<div class="assemble_dayssec">
<div class="assemble_dayswidth">
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a>
</li>
<li><a href="javascript:void(0);">SECOND</a>
</li>
<li><a href="javascript:void(0);">THIRD</a>
</li>
<li><a href="javascript:void(0);">RESET</a>
</li>
</ul>
</div>
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a>
</li>
<li><a href="javascript:void(0);">SECOND</a>
</li>
<li><a href="javascript:void(0);">THIRD</a>
</li>
<li><a href="javascript:void(0);">RESET</a>
</li>
</ul>
</div>
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a>
</li>
<li><a href="javascript:void(0);">SECOND</a>
</li>
<li><a href="javascript:void(0);">THIRD</a>
</li>
<li><a href="javascript:void(0);">RESET</a>
</li>
</ul>
</div>
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a>
</li>
<li><a href="javascript:void(0);">SECOND</a>
</li>
<li><a href="javascript:void(0);">THIRD</a>
</li>
<li><a href="javascript:void(0);">RESET</a>
</li>
</ul>
</div>
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a>
</li>
<li><a href="javascript:void(0);">SECOND</a>
</li>
<li><a href="javascript:void(0);">THIRD</a>
</li>
<li><a href="javascript:void(0);">RESET</a>
</li>
</ul>
</div>
<div class="weekdays">
<a class="headtext" href="javascript:void(0);">Test</a>
<ul class="weekdaylist">
<li><a href="javascript:void(0);">FIRST</a>
</li>
<li><a href="javascript:void(0);">SECOND</a>
</li>
<li><a href="javascript:void(0);">THIRD</a>
</li>
<li><a href="javascript:void(0);">RESET</a>
</li>
</ul>
</div>
</div>
</div>