javascript效果不正确

标签 javascript mootools 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="stylesheet" type="text/css" href="http://shaojie.me/wp-content/example/styles/base.css"/>
    <link rel="stylesheet" type="text/css" href="http://shaojie.me/wp-content/example/styles/item.css"/>
    <script type="text/javascript" src="scripts/mootools-core-1.3.2.js"></script>

</head>
<body>
<div id="main-content-full">
    <iframe id="resize" src="buy.php" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>

内部 iframe 页面: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="stylesheet" type="text/css" href="http://shaojie.me/wp-content/example/styles/base.css"/>
    <link rel="stylesheet" type="text/css" href="http://shaojie.me/wp-content/example/styles/item.css"/>
    <script type="text/javascript" src="http://shaojie.me/wp-content/example/scripts/mootools-core-1.3.2.js"></script>

</head>
<body>
<div id="main-content-full">
<div class="main-content-row species">
<div class="bd">
<table>
<tbody>
<tr>
    <th>
        <a href="BuyerList.aspx?cat=110000">
            女装/女士精品：</a>
    </th>

    <td>
        <ul>

            <li><a href="BuyerList.aspx?Cat=110800&amp;Q=">
                连衣裙</a></li>

            <li><a href="BuyerList.aspx?Cat=110400&amp;Q=">
                T恤</a></li>

            <li><a href="BuyerList.aspx?Cat=111800&amp;Q=">
                裤子</a></li>

            <li><a href="BuyerList.aspx?Cat=111700&amp;Q=">
                春夏装</a></li>

            <li><a href="BuyerList.aspx?Cat=110500&amp;Q=">
                衬衫</a></li>

            <li><a href="BuyerList.aspx?Cat=112300&amp;Q=">
                蕾丝衫/雪纺衫</a></li>

            <li><a href="BuyerList.aspx?Cat=111900&amp;Q=">
                半身裙</a></li>

            <li><a href="BuyerList.aspx?Cat=110100&amp;Q=">
                针织衫</a></li>

            <li><a href="BuyerList.aspx?Cat=112200&amp;Q=">
                小背心/小吊带</a></li>

            <li><a href="BuyerList.aspx?Cat=110600&amp;Q=">
                小西装</a></li>

            <li><a href="BuyerList.aspx?Cat=110900&amp;Q=">
                皮衣</a></li>

            <li><a href="BuyerList.aspx?Cat=110300&amp;Q=">
                短外套</a></li>

            <li><a href="BuyerList.aspx?Cat=112800&amp;Q=">
                婚纱/旗袍/礼服</a></li>

            <li><a href="BuyerList.aspx?Cat=112400&amp;Q=">
                牛仔裤</a></li>

            <li><a href="BuyerList.aspx?Cat=112900&amp;Q=">
                马夹</a></li>

            <li><a href="BuyerList.aspx?Cat=111500&amp;Q=">
                羽绒服</a></li>

            <li><a href="BuyerList.aspx?Cat=110700&amp;Q=">
                卫衣</a></li>

            <li><a href="BuyerList.aspx?Cat=111600&amp;Q=">
                羽绒背心/棉背心</a></li>

            <li><a href="BuyerList.aspx?Cat=110200&amp;Q=">
                毛衣</a></li>

            <li><a href="BuyerList.aspx?Cat=111400&amp;Q=">
                棉衣</a></li>

            <li><a href="BuyerList.aspx?Cat=111100&amp;Q=">
                风衣</a></li>

        </ul>
    </td>
    <td>
        <a href="javascript:void(0)" class="more">more</a>
    </td>

</tr>

<tr>
    <th>
        <a href="BuyerList.aspx?cat=100000">
            男装：</a>
    </th>
    <td>
        <ul>

            <li><a href="BuyerList.aspx?Cat=100400&amp;Q=">
                长袖衬衫</a></li>

            <li><a href="BuyerList.aspx?Cat=100300&amp;Q=">
                长袖T恤</a></li>

            <li><a href="BuyerList.aspx?Cat=100500&amp;Q=">
                休闲长裤</a></li>

            <li><a href="BuyerList.aspx?Cat=101000&amp;Q=">
                牛仔裤</a></li>

            <li><a href="BuyerList.aspx?Cat=101100&amp;Q=">
                卫衣</a></li>

            <li><a href="BuyerList.aspx?Cat=100100&amp;Q=">
                羽绒服</a></li>

            <li><a href="BuyerList.aspx?Cat=100900&amp;Q=">
                西服</a></li>

            <li><a href="BuyerList.aspx?Cat=100800&amp;Q=">
                毛衣/线衣</a></li>

            <li><a href="BuyerList.aspx?Cat=100700&amp;Q=">
                风衣</a></li>

        </ul>
    </td>
    <td>
        <a href="javascript:void(0)" class="more">more</a>
    </td>
</tr>

<tr>
    <th>

        <a href="BuyerList.aspx?cat=180000">
            童装/亲子装：</a>
    </th>
    <td>
        <ul>

            <li><a href="BuyerList.aspx?Cat=181000&amp;Q=">
                儿童T恤/吊带衫</a></li>

            <li><a href="BuyerList.aspx?Cat=180600&amp;Q=">
                儿童裙子</a></li>

            <li><a href="BuyerList.aspx?Cat=180100&amp;Q=">
                儿童套装</a></li>

            <li><a href="BuyerList.aspx?Cat=181300&amp;Q=">
                儿童裤子</a></li>

            <li><a href="BuyerList.aspx?Cat=180400&amp;Q=">
                儿童毛衣</a></li>

            <li><a href="BuyerList.aspx?Cat=181200&amp;Q=">
                儿童衬衫</a></li>

            <li><a href="BuyerList.aspx?Cat=181500&amp;Q=">
                其它童装</a></li>

            <li><a href="BuyerList.aspx?Cat=180800&amp;Q=">
                长裤</a></li>

            <li><a href="BuyerList.aspx?Cat=180300&amp;Q=">
                儿童卫衣/绒衫</a></li>

        </ul>
    </td>

    <td>
        <a href="javascript:void(0)" class="more">more</a>
    </td>
</tr>

<tr>
    <th>
        <a href="BuyerList.aspx?cat=160000">
            女鞋：</a>

    </th>
    <td>
        <ul>

            <li><a href="BuyerList.aspx?Cat=160300&amp;Q=">
                帆布鞋</a></li>

        </ul>
    </td>

    <td>
        <a href="javascript:void(0)" class="more">more</a>
    </td>
</tr>

<tr>
    <th>
        <a href="BuyerList.aspx?cat=170000">
            服饰配件：</a>

    </th>
    <td>
        <ul>

            <li><a href="BuyerList.aspx?Cat=170200&amp;Q=">
                腰带/皮带/腰链</a></li>

            <li><a href="BuyerList.aspx?Cat=171200&amp;Q=">
                其它配件</a></li>

            <li><a href="BuyerList.aspx?Cat=170100&amp;Q=">
                帽子</a></li>

        </ul>
    </td>
    <td>
        <a href="javascript:void(0)" class="more">more</a>
    </td>

</tr>

<tr>
    <th>
        <a href="BuyerList.aspx?cat=150000">
            男鞋：</a>
    </th>
    <td>
        <ul>

            <li><a href="BuyerList.aspx?Cat=150300&amp;Q=">
                休闲皮鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=150200&amp;Q=">
                运动休闲鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=150100&amp;Q=">
                日常休闲鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=151600&amp;Q=">
                凉拖</a></li>

            <li><a href="BuyerList.aspx?Cat=150900&amp;Q=">
                商务休闲鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=151300&amp;Q=">
                懒人鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=150300&amp;Q=">
                休闲皮鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=150200&amp;Q=">
                运动休闲鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=150100&amp;Q=">
                日常休闲鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=151600&amp;Q=">
                凉拖</a></li>

            <li><a href="BuyerList.aspx?Cat=150900&amp;Q=">
                商务休闲鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=151300&amp;Q=">
                懒人鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=150300&amp;Q=">
                休闲皮鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=150200&amp;Q=">
                运动休闲鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=150100&amp;Q=">
                日常休闲鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=151600&amp;Q=">
                凉拖</a></li>

            <li><a href="BuyerList.aspx?Cat=150900&amp;Q=">
                商务休闲鞋</a></li>

            <li><a href="BuyerList.aspx?Cat=151300&amp;Q=">
                懒人鞋</a></li>

        </ul>
    </td>
    <td>
        <a href="javascript:void(0)" class="more">more</a>
    </td>
</tr>

<tr>
    <th>

        <a href="BuyerList.aspx?cat=190000">
            家居鞋类：</a>
    </th>
    <td>
        <ul>

            <li><a href="BuyerList.aspx?Cat=190100&amp;Q=">
                拖鞋</a></li>

        </ul>
    </td>
    <td>
        <a href="javascript:void(0)" class="more">more</a>
    </td>
</tr>

<tr>
    <th>

        <a href="BuyerList.aspx?cat=120000">
            内衣/家居服：</a>
    </th>
    <td>
        <ul>

            <li><a href="BuyerList.aspx?Cat=120700&amp;Q=">
                男士内裤</a></li>

            <li><a href="BuyerList.aspx?Cat=120100&amp;Q=">
                文胸</a></li>

            <li><a href="BuyerList.aspx?Cat=120200&amp;Q=">
                女士内裤</a></li>

            <li><a href="BuyerList.aspx?Cat=120400&amp;Q=">
                保暖内衣</a></li>

            <li><a href="BuyerList.aspx?Cat=122300&amp;Q=">
                短袜/打底袜/丝袜/静脉曲张袜</a></li>

        </ul>
    </td>
    <td>
        <a href="javascript:void(0)" class="more">more</a>
    </td>

</tr>

</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript">
    /*products species*/
    var itemMore = {
        initialize: function() {
            this.uls = $$(".species ul");
            this.mores = $$(".species .more");
            this.mores.each(function(more, i) {
                this.toggleItem(more, this.uls[i], i);
            }, this)
        },

        toggleItem: function(more, ul, i) {
            ul.setStyle("height", "auto");
            if (ul.getSize().y > 18) {
                var store = true;
                ul.setStyle("height", "18px")
            }
            if (!store) {
                more.setStyle("display", "none");
            }
            more.addEvent("click", function(e) {
                e.stop();
                this.toggleClass("up");
                ul.toggleClass("item");
            })
        }
    }
    itemMore.initialize();

    top.$("resize").set({
                styles: {
                    width: 760,
                    height: 1200
                }
            })
</script>
</body>
</html>

问题演示页面链接是: http://shaojie.me/wp-content/example/home.php

第五行不应显示更多 (更多) 按钮，但它已显示。有人可以帮助我吗？谢谢。

最佳答案

似乎正在显示第五行的“更多”按钮，因为 <ul> 的高度超过 18 像素，即使该行中只有一个水平文本行。

如果我直接导​​航到 http://shaojie.me/wp-content/example/buy.php ，我没有看到问题。

也许你应该使用更大的阈值，例如

// ...
if (ul.getSize().y > 24) {
    var store = true;
    ul.setStyle("height", "18px")
}
// ...

或者，使用“更智能”的测试 - 一个不依赖 <ul> 高度的测试。 。数一下 <li> 的数量怎么样？是？假设 4 列 <li>那么，

// ...
if (ul.getElements("li").length > 4) {
    var store = true;
    ul.setStyle("height", "18px")
}
// ...

关于javascript效果不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6234483/

上一篇：javascript - Chrome 中的 jQuery 图像高度/宽度

下一篇：javascript - IE7 追加但注入(inject)时不加载 &lt;script&gt;

相关文章：

javascript - 如何检测鼠标中键点击？

javascript - jquery 计算word中的字符数

javascript - Dom 元素 onclick (MooTools::可选)

javascript - 如何解决 jQuery 和 mootoools 冲突？

events - 如何定义一个事件来更改具有不同事件的元素？

javascript - Mootools代码解释

javascript正则表达式可选字符

javascript - mysql数据库填充表中的多个搜索选项

javascript - jQuery 自定义内容滚动条

javascript - 在屏幕上注入(inject)/返回新元素

©2024 IT工具网  联系我们