javascript - 展开/折叠跨度？

Question

我有多个 <span>我想展开/折叠。我知道如何用 <tr> 制作并尝试了同样的方法没有用。此 SharePoint 自动生成的代码。我无法控制它。

<span id="#part1">
   <table>
    <tr>
    <tr>
    ----
    ----
    <tr> <!-- 28th tr -->
    <td> </td>
    <td>
     <div>
        <span class="ms-noWrap">
            <span class="ms-imnSpan">
                <a href="#" class="ms-imnlink ms-spimn-presenceLink">
                    <span ><img name="imnmark">
                    </span>
                </a>
            </span>
            <span class="ms-noWrap ms-imnSpan">
                <a href="#"  class="ms-imnlink" >
                    <img name="imnmark">
                </a>
                <a class="ms-subtleLink" >Sri</a>
            </span>
        </span>
        (<a href="link">4/1/2015 1:45 PM</a>): NA
        <br>
        <br>
        <span class="ms-noWrap">
            <span class="ms-imnSpan">
                <a href="#" class="ms-imnlink ms-spimn-presenceLink">
                    <span ><img name="imnmark">
                    </span>
                </a>
            </span>
            <span class="ms-noWrap ms-imnSpan">
                <a href="#"  class="ms-imnlink" >
                    <img name="imnmark">
                </a>
                <a class="ms-subtleLink" >Sri</a>
            </span>
        </span>
        (<a href="link">4/1/2015 1:45 PM</a>): NA
        <br>
        <br>
            <span class="ms-noWrap"> <!-- From here I want expand /collapse -->
            <span class="ms-imnSpan">
                <a href="#" class="ms-imnlink ms-spimn-presenceLink">
                    <span ><img name="imnmark">
                    </span>
                </a>
            </span>
            <span class="ms-noWrap ms-imnSpan">
                <a href="#"  class="ms-imnlink" >
                    <img name="imnmark">
                </a>
                <a class="ms-subtleLink" >Sri</a>
            </span>
        </span>
        (<a href="link">4/1/2015 1:45 PM</a>): NA
        <br>
        <br>    
    <div>
    </span>
   <td>
<tr>

我试过了

    <script src="/dept/it/Shared%20Documents/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                  var commentrow="<tr class='comment expand'><td nowrap='true' valign='top' width='113px' class='ms-formlabel'><h4 class='ms-standardheader'><u> More comments..<u></h4></td><td valign='top' class='ms-formbody' width='350px' ></td></tr>";   
                  $(commentrow).insertAfter("#part1 table tr:nth-child(28) td:nth-child(2) div span:nth-child(4)")
        $('.comment').toggleClass('expand').nextUntil('tr.comment').slideToggle(10);
                   $('.comment').click(function(){           

              $(this).toggleClass('expand').nextUntil('tr.comment').slideToggle(100);
        });
       });
</script>
<style>
    tr.comment
    {
        cursor:pointer;
    }
</style>

Answer 1

您的初始跨度具有 ID #part1，并且您正尝试使用相同的值来引用它。但这在 jQuery 中不起作用，因为 # 是 for id 的符号。相反，您必须转义哈希:

$(commentrow).insertAfter("#\\#part1 table ... etc.

虽然我在做，但您还试图在结束电流之前添加 tr。 commentrow 应该以以下内容开头:

var commentrow="</tr><tr class=" ... etc.