展开/折叠跨度？

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中将不起作用，因为＃是对于 id的记号。相反，你将不得不逃离哈希：

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

，而我在这，你也试图结束当前前添加tr。该commentrow也许应该这样开始：

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

Answer 2

使行隐藏显示是更加由，因为他们的古怪的显示属性的div或跨度，绑表结构。我没有把这个一起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);   
 
});