Question

我有一个博客＆＃39;使用php生成博客文章的页面。 div都有相同的类，PHP代码如下：

$loopResult .= ' 
            <div class="blogbox show"> 
                <div class="blogtitle">'.$row['TITLE'].'</div> 
                <div class="blogdate">'.$row['DATE'].'</div>                    
                <div class="blogcontent">'.$row['CONTENT'].'</div> 
                <div class="blogimage"> <img src="'.$row['IMAGE'].'"/></div> 
                <div class="blogimage"> <img src="'.$row['IMAGEB'].'"/></div>
                <div class="blogimage"> <img src="'.$row    ['IMAGEC'].'"/></div> 
                <div class="showHide">Show/Hide</div>
            </div>              
    '; 
} 
echo $loopResult;

我在showHide div上有一个jquery点击功能，它将切换一个类来扩展div以便阅读。 JQUERY：

$('.showHide').click(function() {
$('.blogbox').toggleClass('show');
});

显然，我的问题是点击功能会扩展所有博文，而不仅仅是用户点击的博文。

如何进行此操作，以便只展开选定的div？正如你所看到的，我对此比较陌生，所以对任何帮助表示赞赏。

谢谢！

Answer 1

这样做。

$('.showHide').click(function(){
    $(this).toggleClass('show');
    });

使用通用类名showHide作为选择器fpr click事件，但仅指向具有this的实际元素将为您提供帮助。

这是你的小提琴： http://jsfiddle.net/hhgxsnv1/

使用更流畅的效果，您还可以包含jQuery ui库： http://jsfiddle.net/hhgxsnv1/2/

$('.showHide').click(function(){
   $(this).toggleClass('show', 500, 'easeOutSine');
   });

Answer 2

试试这个：

 $('.showHide').click(function() {
    $(this).closest('.blogbox').toggleClass('show');
    });

当几个具有相同的类时，jquery单击事件将类添加/删除到一个div

2 个答案: