文章/答案/技术大牛

发布

社区首页 >问答首页 >在jQuery中切换wordpress中的活动和非活动div

问在jQuery中切换wordpress中的活动和非活动div
EN

Stack Overflow用户

提问于 2015-07-16 06:10:38

回答 1查看 568关注 0票数 2

在wordpress类别页面中，我希望在post中切换活动类和停用类。

当我单击“读更多”按钮时，删除类、停用和添加类活动

使用代码：

Its在环

 <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');
        }
        });
});

问题是当我点击其他帖子时，它不会停用(请阅读更多)。

jquery

html

wordpress

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-07-16 06:33:13

.post-content {}应该具有停用类的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>

联署材料：

您不需要在每个post 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');
    });
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31446470

复制

相似问题

问在jQuery中切换wordpress中的活动和非活动div
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jQuery中切换wordpress中的活动和非活动divEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jQuery中切换wordpress中的活动和非活动div
EN