Question

我根据帖子在网站上发表了几条评论，我只想显示/隐藏所选评论。我有这个问题，并试图找出答案。当我点击一个选项时，show / hide工作正常，但它也隐藏或显示在其下的任何其他内容上。我希望触发器能够显示/隐藏只有一个已点击的评论。

有没有人如何使slideToggle（）以这种方式工作？

这是当前的代码：

jQuery(document).ready(function() 
{
    // Slides container Up and Down on click
    jQuery('div.toggle').click(function(event) {

        // Get the ID by removing the '-'
        $getID = event.target.id.split('-');

        // Get the right content 
        $getContent = jQuery("div#content").parent().find("#"+$getID[1]);


        // Check if content exist 
        if ($getContent.length > 0)
            $getContent.slideToggle('slow');

    });
});

**这是HTML代码：实际上他们在一个循环中。

<?php while (have_posts()) : the_post(); ?>

  <div class="toggle">  
     <ul id="nav">  
      <li><a href="javascript:;" id="option-view">View Comments /a></li> 
       ... 
     </ul>  
  </div>  

  <div id="content">  
   <div id="view"><?php $withcomments = 1; comments_template(); ?></div>  
  </div>  

 <div id="add"> Add a COMMENT here!! </div>


<?php endwhile; ?>

***最后，在花了差不多一整天才弄明白试验和错误后，它正在工作。这是代码：

 <div class="toggle"> 
   <ul id="nav">   
    <li><a href="javascript:;" class="option-view" id="option-view">View Comments</a></li>  
    <li><a href="javascript:;" class="option-add" id="option-add">Add Comments</a></li>  
   </ul>

  <div class="content">   
   <div id="view">.......VIEW a comment</div>   
   <div id="add">......Add a COMMENT here!!</div> 
  </div>   

</div>

*** JS代码：

jQuery(document).ready(function() 
{
    jQuery('.toggle').bind("click", function(event) { 
        $getID = event.target.id.split('-');    
        //alert($getID)

        jQuery(this).parent().find("#"+$getID[1]).slideToggle('slow');       
        return false; 
    });
});

感谢Half-Dead帮助我们走上正确的道路......

Answer 1

在没有更多信息的情况下，我将建议可能有更好的方法来确定要关闭的评论。我假设你有一些结构如下：

<div id="content">
   <div class="post-container">
       <div class="post"> post </div>
       <div><a href="#" class="toggle">Toggle Comments</a></div>
       <div class="comment"> comment </div>
       <div class="comment"> comment </div>
       <div class="comment"> comment </div>
       <div class="comment"> comment </div>
   </div>
   <div class="post-container">
     ...
   </div>
   ...
</div>

然后我将实现切换注释功能：

$(function() {
     $('.toggle').click( function() {
         $(this).closest('.post-container')
                .find('.comment')
                .slideToggle('slow');
         return false;
     });
});

基本思想是将DOM结构和元素的相对位置与CSS类装饰结合使用，以便轻松选择您想要处理的元素，而不是依赖于字符串操作和编码关系。元素的ID。我发现依赖结构和类“标记”比使用id操作几乎总是更容易。代码更易于阅读且更可靠。但是，它确实优先考虑结构良好的HTML和HTML元素的适当分类。

Answer 2

不应该这样吗？

     $('.toggle').bind("click", function() {
         $(this).toggle();
         return false;
     });

or

     $('.toggle').click( function() {
         $(this).toggle();
         return false;
     });

Answer 3

您可以使用css样式并切换id

$('.comment').click(function(){
    //hide the one that was visible
    $('#current').removeAttr('id');
    //show the one that was clicked
    $(this).attr('id', 'current');
});


div.comment{
     display:none;
}
div#current .comment{
    display: block
}

Answer 4

问题在于，根据您的代码，生成的注释都共享相同的ID。改为使用类，或确保生成唯一ID（使用wordpress生成的帖子ID）。

因此，首先，将您的html标记更改为更好的单独行为（javascript）和HTML代码：

<?php while (have_posts()) : the_post(); ?>

  <div class="toggle">  
     <ul id="nav">  
      <li><span  class="viewComment" id="view-345">View Comments </span></li> 
       ... 
     </ul>  
  </div>  

  <div id="content">  
   <div class="commentContent" id="comment-345"><?php $withcomments = 1; comments_template(); ?></div>  
  </div>  

 <div id="add"> Add a COMMENT here!! </div>


<?php endwhile; ?>

现在，实现此标记所需行为的javascript将是：

   jQuery(document).ready(function() 
    {
    // first, we hide all comments for javascript-enabled people,
// so the added functionality does not prevent people without 
//javascript from seeing your comments.

$('.commentContent').hide();

        // Slides container Up and Down on click
        jQuery('span.viewComment').click(function(event) {

            // Get the ID by removing the '-'
            $getID = this.id.split('-');

            // Get the right content 
            $getContent = jQuery("#comment-"+$getID[1]);


            // Check if content exist 
            if ($getContent.length > 0)
                $getContent.slideToggle('slow');

        });
    });

您可以在此处看到working demo。

Answer 5

好吧，我想你想要做这样的事情：

你可以在这里玩它： http://jsbin.com/edahi
html：

  <!-- post 1 --> 
  <div class="toggle"> 
    <ul id="nav">   
      <li><a href="#" class="option-view">View Comments</a></li>  
    </ul>    
    <div class="content" style="display:none;">   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>  
    </div>   
    <div id="add">Add a COMMENT here!!</div> 
  </div> 
  <!-- /post 1 --> 


  <!-- post 2 --> 
  <div class="toggle"> 
    <ul id="nav">   
      <li><a href="#" class="option-view">View Comments</a></li>  
    </ul>    
    <div class="content" style="display:none;">   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>   
      <div id="view">.......a comment</div>  
    </div>   
    <div id="add">Add a COMMENT here!!</div> 
  </div> 
  <!-- /post 2 -->

和js：

$('.toggle').bind("click", function() { 
  $(this).find(".content").toggle();       
  return false; 
});

JQuery：如何使显示/隐藏仅使用相同的链接名称？

5 个答案: