在 jQuery 中切换 wordpress 中的活动和非活动 div答案

【问题标题】：in jQuery toggle active and deactive divs in wordpress在 jQuery 中切换 wordpress 中的活动和非活动 div
【发布时间】：2015-07-16 14:33:13
【问题描述】：

在 wordpress 类别页面中，我想在帖子中切换活动和停用课程。

当我点击阅读更多按钮删除类停用并添加类活动

使用代码：

在循环中

 <div class="post-content deactivate" id="postfull_con<?php echo $postid; ?>" >
                <?php the_content();?>
            </div>

<div class="post_less" id="post-<?php echo $postid; ?>">
                <p>Read more </p>
            </div>

循环结束

jQuery(document).ready(function() {
jQuery('#post-<?php echo $postid; ?>').on('click', function() {
     if(jQuery('#postfull_con<?php echo $postid; ?>').hasClass('active')){
           jQuery('#postfull_con<?php echo $postid; ?>').removeClass('active');
           jQuery('#postfull_con<?php echo $postid; ?>').addClass('deactivate');
        }else{
           jQuery('#postfull_con<?php echo $postid; ?>').addClass('active');
           jQuery('#postfull_con<?php echo $postid; ?>').removeClass('deactivate');
        }
        });
});

问题是当我点击其他帖子时它没有停用（阅读更多）

【问题讨论】：

stackoverflow.com/questions/19164436/…
你为什么把php代码放在你的jquery中？只需定位类。
在这个例子中，也有同样的问题，看看例子 [jsfiddle.net/Q5Ewe/] 当我点击阅读更多时，它完全打开了。但是当我点击下一个“阅读更多”时。我想要预览少读一读
@dingo_d 没问题..请回答我有什么问题
@dingo_d 如果您有课程解决方案，请告诉我。

标签： javascript jquery html wordpress

【解决方案1】：

.post-content {}应该有deactivate类的CSS规则

HTML：

<div class="post-content" id="postfull_con<?php echo $postid; ?>" >
    <?php the_content();?>
</div>

<div class="post_less" data-id="<?php echo $postid; ?>">
    <p>Read more </p>
</div>

Js：

您不需要对每个帖子 ID 进行绑定。

$(document).ready(function() {
    $('.post-less').on('click', function() {
        var postId = $(this).data('id');

        //Close all other open posts
        //It's a bad practice to remove one class to add another for a specific funtionality to happen
        //The default state of post-content should be the "deactivate" class and when you add active rules should be overwriten.
        $('.post-content').removeClass('active');

        //Look for the full post and activated
        $('#postfull_con' + postId).addClass('active');
    });
});

【讨论】：