Question

为什么我的以下代码在IE7中不起作用，但在chrome，opera，mozila中工作....

JavaScript的：

$(function(){
    $(".sub").hide();
    $("tr#sub1").show();
    $(".expandSub a").click(function(){
        var relValue = $(this).attr("rel");
        $("tr#"+relValue).toggle();
        var t = $(this).text();
        if(t=="+")$(this).html("-");
        else if(t=="-")$(this).html("+");
        return false;
    });
});

HTML：

<table cellspacing="0">
    <tr class="headRow">
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td width="350px" align="center">Title</td>
    </tr>
    <tr class="leadRow">
        <td class="expandSub"><a href="" rel="sub1">-</a></td>
        <td>1</td>
        <td>Cake</td>
    </tr>
    <tr class="sub" id="sub1">
        <td>&nbsp;</td>
        <td>1</td>
        <td>Red Velvet Cakes</td>
    </tr>
    <tr class="sub evenRow" id="sub1">
        <td>&nbsp;</td>
        <td>2</td>
        <td>Cupcake Recipes</td>
    </tr>
    <tr class="sub" id="sub1">
        <td>&nbsp;</td>
        <td>3</td>
        <td>Pineapple Mojo Cake</td>
    </tr>
    <tr class="sub evenRow" id="sub1">
        <td>&nbsp;</td>
        <td>2</td>
        <td>Carrot Cake Recipes</td>
    </tr>
    <tr class="sub" id="sub1">
        <td>&nbsp;</td>
        <td>3</td>
        <td>Zucchini Chocolate Chip Cake</td>
    </tr>

    <tr class="leadRow">
        <td class="expandSub"><a href="" rel="sub2">+</a></td>
        <td>2</td>
        <td>Cookies</td>
    </tr>
    <tr class="sub" id="sub2">
        <td>&nbsp;</td>
        <td>1</td>
        <td>Chocolate Chip Cookie Recipes</td>
    </tr>
    <tr class="sub evenRow" id="sub2">
        <td>&nbsp;</td>
        <td>1</td>
        <td>Sugar Cookie Recipes</td>
    </tr>
    <tr class="sub" id="sub2">
        <td>&nbsp;</td>
        <td>1</td>
        <td>Filled Cookies</td>
    </tr>
    <tr class="sub evenRow" id="sub2">
        <td>&nbsp;</td>
        <td>1</td>
        <td>Sugared Black Raspberry Tea Cookiess</td>
    </tr>

    <tr class="leadRow" rel="sub3">
        <td class="expandSub"><a href="" rel="sub3">+</a></td>
        <td>3</td>
        <td>Appetizers</td>
    </tr>
    <tr class="sub" id="sub3">
        <td>&nbsp;</td>
        <td>1</td>
        <td>Hummus Recipes</td>
    </tr>
    <tr class="sub evenRow" id="sub3">
        <td>&nbsp;</td>
        <td>1</td>
        <td>Cheese Balls</td>
    </tr>
</table>

Answer 1

如果我不得不猜测，我会说这是因为您的HTML无效。在HTML中，您的ID必须绝对唯一。

您重复了ID（即id="sub1"），这是无效的。可能IE7对此并不高兴。老实说，我对任何浏览器的工作都感到惊讶。

将HTML粘贴到W3C的验证服务中以查看所有错误：

http://validator.w3.org/

。为什么这个jQuery手风琴代码在IE7中不起作用

1 个答案: