javascript - 常见问题页面。显示和隐藏内容，JQuery 和 CSS 问题

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