Question

我在显示和隐藏内容时遇到问题。我无法隐藏或显示完整内容。

我的问题是这个类用于样式faq-link-style。当我删除它时，我阅读更多，阅读更少的按钮/链接工作。我想这可能是我在JQuery中编写它的方式。我尝试了很多不同的版本，但无法使其正常工作。示例：$（'。faq-link-style .read-more'）

还有其他方法可以改进我的代码吗？我不想复制我的代码。示例：我不想两次获取内容。一次介绍（阅读更少，常见问题介绍）和另一次全文（阅读更多，常见问题解答）

先谢谢

<div class="col-lg-4">
    <div class="faq-all">
        <div class="faq-item">
            <h2><?php the_title(); ?></h2>
            <article>

           <div class="faq-intro">
                     <?php the_content(); ?>
           </div>
          <div class="faq-info">
                     <?php the_content(); ?>
           </div>

            <div class="faq-link-style">
                <a href="#" class="read-more">Read More</a>
                <a href="#" class="read-less">Read Less</a>
            </div>
           </article>
        </div>
    </div>
</div>

JQuery的：

(function ($) {
    $(document).ready(function () {

        var showChar = 600;  // How many characters are shown by default

        $('.faq-intro').each(function() {
            var content = $(this).html();

            if(content.length > showChar) {
                var s = $(this).html();
                var c = content.substr(0, showChar);
                var h = content.substr(showChar, content.length - showChar);
                var html = c + " ... ";
                $(this).html(html);
            }

            if(content.length < showChar){
                $(this).parent().find('.read-less').hide();
                $(this).parent().find('.read-more').hide();
            }
        });

        $('.faq-info').hide();
        $('.read-less').hide();

        //read more
        $('.read-more').click(function(){
            $(this).siblings('.faq-info').show();
            $(this).hide();
            $(this).parent().find('.read-less').show();
            $(this).siblings('.faq-intro').hide();
        })

        $('.read-less').click(function(){
            $(this).siblings('.faq-info').hide();
            $(this).hide();
            $(this).parent().find('.read-more').show();
            $(this).siblings('.faq-intro').show();
        });
    });
})(jQuery);

Answer 1

您的选择器错误，应该是：

$('.read-more').click(function(){
     $(this).hide()
            .siblings('.read-less').show().end()
            .parent()
                     .siblings('.faq-intro').hide().end()
                     .siblings('.faq-info').show();
});

$('.read-less').click(function(){
     $(this).hide()
            .siblings('.read-more').show().end()
            .parent()
                     .siblings('.faq-intro').show().end()
                     .siblings('.faq-info').hide();
});

FAQ页面。显示和隐藏内容，JQuery和CSS问题

1 个答案: