1

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

到目前为止我所拥有的描述：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，对我来说没有太大区别。

4

1 回答 1

3

尝试这个：

$("#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/

于 2012-12-08T13:16:57.030 回答