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

您的初始范围标识为#part1，并且您尝试使用相同的值引用它。但是这在jQuery中不起作用，因为＃是的符号。相反，你必须逃避哈希：

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

虽然我对此感到满意，但您在结束电流之前还尝试添加tr。 commentrow应该以：
开头
var commentrow="</tr><tr class=" ... etc.

Answer 2

将行隐藏显示可能比div或spans更棘手，因为它们古怪的显示属性与表结构相关联。我确实把这个jquery演示放在一起，可以做你想做的事情：

jsfiddle - click to hide/show rows

// Basically, hide all comments except direct child comment, then toggle child.

$('.expand').hide();
$('.hasComment').click(function(){
    var com = $(this).next('.comment');
     $('.comment').not(com).hide();
    com.toggleClass('expand').slideToggle(600);        
});

展开/折叠跨度？

2 个答案: