Question

我有一个小问题，请帮我解决这个问题，找到我在这里缺少的东西我的HTML代码是：

<div class="drop-down-menu">
  <div class="innerdrop-down-menu">
    <div id="first-tab-cont">
      <ul id="slider">
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
       </ul>
       <a href="javascript:;" id="back">&lArr;</a>
       <a href="javascript:;" id="forward">&rArr;</a>
     </div>
  </div>
</div>

CSS代码：

.drop-down-menu{ display:none; position:relative; background-color:#FFFFFF; width:100%; height:280px; z-index:2; }
#first-tab-cont{ background-color:#CCC; display:none; width:960px; height:240px; padding:20px; }
#slider{ background-color:#C9F; position:relative; min-width:100%; width:auto; height:240px; font-family: HelveticaNeue; white-space:nowrap; }
#slider li{ background-color:#C03; display:inline-block; margin-right:15px; white-space:nowrap; width:300px; height:240px; }

当前的jQuery代码是：

var Min = 0;
var Max = $("#fifth-tab-cont #slider").width();
var Step = 300;

$("#first-tab-cont #back").click(function(){
    if($("#first-tab-cont #slider").position().left <= Min + Step) {
        $("#first-tab-cont #slider").animate({left: '+=300px'}, Step );
    }
});
$("#first-tab-cont #forward").click(function(){
    if($("#first-tab-cont #slider").position().left >= Max + Step) {
        $("#first-tab-cont #slider").animate({left: '-=300px'}, Step );
    }
});

我的问题是如何才能获得slider宽度尺寸，所以我只能向左滚动直到他的尺寸？

Answer 1

可以让它显示（display: block），但要使其透明（opacity: 0）。或者显示它，获取尺寸，然后隐藏它。

var Min = 0,
    $dropDownMenu = $('.drop-down-menu').show(),
    $slider = $("#slider");
    Max = $slider.width(),
    Step = 300;

$dropDownMenu.hide();

$("#back").click(function(){
    if($slider.position().left <= Min + Step) {
        $slider.animate({left: '+=300px'}, Step );
    }
});
$("#forward").click(function(){
    if($slider.position().left >= Max + Step) {
        $slider.animate({left: '-=300px'}, Step );
    }
});

Answer 2

如果您可以将整个块放在屏幕之外，则可以获取元素的大小，以获取您无法访问的隐藏元素。

您可以使用position:absolute并远离视口

Answer 3

我在小提琴中试过它，并分享了一个链接，将滑块宽度作为隐藏元素。我们可以简单地使用css属性

visibility:hidden;

我们可以使用display:none;而不是使用visibility:hidden;，这使得jquery可以像元素那样进行思考，但实际上它是隐藏的，它将向我们传递宽度。

我已发出警告以显示#slider宽度，请检查它。

http://jsfiddle.net/fzd10zak/2/

Answer 4

使用此

$(".yourSlider").get(0).scrollWidth

而不是display:none使用width:0px jQuery函数将返回元素的实际非隐藏宽度，因为DOM存储滚动宽度。

从隐藏元素获取宽度大小

4 个答案: