开发者

javascript effect is not correct

问答 作者： 
<!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>

The inner iframe page: 

<!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>

    开发者_StackOverflow中文版        <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>

The question demo page links is: http://shaojie.me/wp-content/example/home.php

The fifth row should not display the more (更多) button, but it's displayed. Can anyone help to me? Thanks.

It appears that the fifth row's "more" button is being displayed because the height of the <ul> is more than 18 pixels, even though there is only one horizontal line of text in that row.

If I navigate directly to http://shaojie.me/wp-content/example/buy.php, I don't see the problem.

Perhaps you should use a larger threshold, like

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

Or, use a "smarter" test — one that doesn't rely on the height of the <ul>. How about counting the number of <li>s? Assuming 4 columns of <li>s, then,

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

继续阅读：javascriptmootools

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9