开发者

javascript effect is not correct

开发者 https://www.devze.com 2023-03-10 13:59 出处:网络
<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title></title>
<!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")
}
// ...
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号