Question

一些介绍：
您好，我想问一下，如果有一种简单的方法，可以知道当用户点击某个按钮时有多少“标签”可见？

到目前为止的描述：
http://jsfiddle.net/L7bPc/7/
在这里，在jsfiddle上，你可以看到我想到的标签的例子，当你加宽或缩小宽度时，可以看到更多或更少的标签（由于“溢出：隐藏;”，它们会消失）。

问题：
我的问题是，有没有简单的方法可以了解，一旦点击右上角的红色方框，可以看到多少个标签？

解释我想要达到的目标：
为什么？因为我将尝试生成一个“不可见”选项卡列表，稍后点击红色方块（我将正确地设置它的样式）。我希望它看起来与许多带有标签的程序类似，当它们太多时，你可以在它的末尾找到一个小箭头，以便在下拉菜单中展开剩余的标签。我问如何知道有多少标签可见，有多少标签不可见（所以我知道在下拉列表中点击后会生成哪些标签），我不询问如何创建下拉列表。

这部分是由php生成的，从MySQL数据库获取数据，并在css中设置样式看起来像标签（我没有在jsfiddle中使用php，只是简单的html）：

<div class="tabs">
    <ul>
        <li id=090NCI class='active'><a href='#' class='active'><span class='active'>090NCI</span></a></li>
        <li id=061PPP><a href='#'><span>061PPP</span></a></li>
        <li id=072KWM><a href='#'><span>072KWM</span></a></li>
        <li id=057ALS><a href='#'><span>057ALS</span></a></li>
        <li id=099AKG><a href='#'><span>099AKG</span></a></li>
        <li id=090WPW><a href='#'><span>090WPW</span></a></li>
        <li id=020MSM><a href='#'><span>020MSM</span></a></li>
        <li id=014LSP><a href='#'><span>014LSP</span></a></li>
        <li id=010AAV><a href='#'><span>010AAV</span></a></li>
        <li id=080MKS><a href='#'><span>080MKS</span></a></li>
        <li id=006ALS><a href='#'><span>006ALS</span></a></li>
        <li id=007KSG><a href='#'><span>007KSG</span></a></li>
        <li id=091AOW><a href='#'><span>091AOW</span></a></li>
        <li id=004ALO><a href='#'><span>004ALO</span></a></li>
        <li id=003WWW><a href='#'><span>003WWW</span></a></li>
        <li id=002KSO><a href='#'><span>002KSO</span></a></li>
        <li id=001NWD><a href='#'><span>001NWD</span></a></li>   
    </ul>
    <div style="position: absolute; right:5px; top:26px; background: red; color:red; width:20px; height: 20px;" onclick="dosomething()"></div>
</div>

任何提示？解决方案可能都是jQuery和javascript，对我来说没什么大不同。

Answer 1

试试这个：

$("#redbox").click(function() {

    var visibleLis = $("li").filter(function() {
        var offset = $(this).offset();
        return $(document.elementFromPoint(offset.left, offset.top)).closest(this).length > 0;
    });

    alert(visibleLis.length);
});

http://jsfiddle.net/L7bPc/11/

如果您将.tabs定义为完全垂直包含标签，则可以使用更优化的版本：

$("#redbox").click(function() {

    var boundingBox = $(".tabs")[0].getBoundingClientRect(),
        bbRight = boundingBox.left + boundingBox.width,
        bbBottom = boundingBox.top + boundingBox.height,
        bbLeft = boundingBox.left,
        bbTop = boundingBox.top;

    var visibleLis = $("li").filter(function() {
        var box = this.getBoundingClientRect(),
            left = box.left,
            top = box.top,
            right = box.left + box.width,
            bottom = box.top + box.height;
        return left >= bbLeft && right <= bbRight && top >= bbTop && bottom <= bbBottom;
    });

    alert(visibleLis.length);
});

http://jsfiddle.net/L7bPc/13/

定义可见元素的数量

1 个答案: