jquery - 交互式块引导

Question

我的页面中有如下块

<!-- Interactive Block -->
    <div class="block">
        <!-- Interactive Title -->
        <div class="block-title">
            <!-- Interactive block controls (initialized in js/app.js -> interactiveBlocks()) -->
            <div class="block-options pull-right">
                <a href="javascript:void(0)" class="btn btn-alt btn-sm btn-default" data-toggle="block-toggle-content"><i class="fa fa-arrows-v"></i></a>
                <a href="javascript:void(0)" class="btn btn-alt btn-sm btn-default" data-toggle="tooltip" title="Add Blog Post"><i class="fa fa-plus"></i></a>
            </div>
            <h2><strong>Latest</strong> Blog Post</h2>
        </div>
        <!-- END Interactive Title -->
        
        <h4><strong><a href="#">Blog Post Title</a></strong></h4>
        <h5>Monday March 1st 2021</h5>

        <!-- Interactive Content -->
        <!-- The content you will put inside div.block-content, will be toggled -->
        <div class="block-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non suscipit odio. Mauris ac nisi ultrices, fermentum ipsum sit amet, pharetra diam. Proin erat leo, lobortis vitae eros vehicula, luctus tincidunt neque. Phasellus tincidunt ligula vel mi feugiat, ut fermentum felis tincidunt. Integer sagittis interdum magna nec suscipit. Nulla mollis turpis lacus, quis luctus purus finibus et. Donec nec eleifend nisl. Suspendisse porta felis varius leo tempor, ut gravida felis iaculis. Pellentesque rhoncus neque diam, eu malesuada nunc malesuada quis. Maecenas vel magna sed diam dignissim faucibus a a ex. Quisque quis elit dui. Sed tincidunt leo vitae faucibus dignissim. Phasellus in quam vitae erat molestie gravida quis ut elit. Mauris hendrerit, purus sed pharetra euismod, massa sapien malesuada nulla, eget venenatis nibh nibh nec leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin ipsum ante, luctus a mi et, viverra ornare sem.</p>
            
          <p>Nulla facilisi. Integer et vehicula purus, sit amet vestibulum ipsum. Aliquam erat volutpat. Donec vulputate arcu risus, sed posuere metus vehicula tristique. Aenean vel risus non sapien elementum aliquet. Nam dolor tortor, tempus ac risus ac, aliquet consequat magna. Nulla vitae justo pulvinar, congue augue ac, volutpat arcu. Cras ipsum ex, feugiat a odio ac, tempus ultrices nisi. Nunc neque metus, hendrerit a felis ac, condimentum gravida turpis. Pellentesque in leo eu turpis iaculis placerat sit amet sit amet arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt tellus nisl, in euismod odio tempor id. Duis velit diam, vestibulum vel nulla nec, vehicula suscipit odio. Mauris massa justo, vehicula id convallis sed, laoreet non metus. Aenean placerat urna blandit, pellentesque orci condimentum, molestie nibh.</p>
        </div>
        
        <!-- END Interactive Content -->
    </div>
    <!-- END Interactive Block -->

和像这样相关的javascript代码

var interactiveBlocks = function() {

        // Toggle block's content
        $('[data-toggle="block-toggle-content"]').on('click', function(){
            var blockContent = $(this).closest('.block').find('.block-content');

            if ($(this).hasClass('active')) {
                blockContent.slideDown();
            } else {
                blockContent.slideUp();
            }

            $(this).toggleClass('active');
        });

        // Toggle block fullscreen
        $('[data-toggle="block-toggle-fullscreen"]').on('click', function(){
            var block = $(this).closest('.block');

            if ($(this).hasClass('active')) {
                block.removeClass('block-fullscreen');
            } else {
                block.addClass('block-fullscreen');
            }

            $(this).toggleClass('active');
        });

        // Hide block
        $('[data-toggle="block-hide"]').on('click', function(){
            $(this).closest('.block').fadeOut();
        });
    };

当我的页面加载时，它会显示完整的块，当我单击箭头按钮时，它会隐藏内容。相反，我希望隐藏内容，只想在单击按钮时显示它。我试图添加类似的代码

$(this).toggleClass('active');

在我的功能开始但它不起作用。我想我错过了一些东西，并且不知道如何处理这个问题。让我知道这里是否有人可以帮助我。谢谢！

标签： jquerybootstrap-4

Answer 1