Question

我在functions.php中创建了一个小部件，用于添加到服务部分。我使用小部件创建并显示了6个独特的服务。在每个服务中，还有一个按钮，单击该按钮将切换剩余的内容。现在的问题是，每当我点击任何服务的更多按钮时，所有其他服务都将被切换。如何修改我的切换脚本，以便当用户单击服务A的按钮时，只切换服务A的内容而不影响其他内容？以下是我的代码和截图“

//的functions.php

<div class="col-lg-4 col-sm-4 focus-box" data-scrollreveal="enter left after 0.15s over 1s">

        <?php if( !empty($instance['image_uri']) && ($instance['image_uri'] != 'Upload Image') ) { ?>

            <div class="service-icon">

                <?php if( !empty($instance['link']) ) { ?>

                    <a href="<?php echo $instance['link']; ?>"><i class="pixeden" style="background:url(<?php echo esc_url($instance['image_uri']); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON--></a>

                <?php } ?>

            </div>

        <?php } elseif( !empty($instance['custom_media_id']) ) {

                $zerif_ourfocus_custom_media_id = wp_get_attachment_image_src($instance["custom_media_id"] );
                if( !empty($zerif_ourfocus_custom_media_id) && !empty($zerif_ourfocus_custom_media_id[0]) ) {
                    ?>

                        <div class="service-icon">

                            <?php if( !empty($instance['link']) ) { ?>

                                <a href="<?php echo $instance['link']; ?>"><i class="pixeden" style="background:url(<?php echo esc_url($zerif_ourfocus_custom_media_id[0]); ?>) no-repeat center;width:100%; height:100%;"></i> <!-- FOCUS ICON--></a>

                            <?php } ?>


                        </div>

                    <?php
                }

            }
        ?>

        <div class="focus-right">
        <h3 class="red-border-bottom boxeq"><?php if( !empty($instance['title']) ): echo apply_filters('widget_title', $instance['title']); endif; ?></h3>
        <!-- FOCUS HEADING -->

        <?php
            if( !empty($instance['text']) ) {
                echo '<p class="boxeq2">';
                    echo nl2br(htmlspecialchars_decode(apply_filters('widget_title', $instance['text'])) );
                echo '</p>';
            }
        ?>

         <!-- MORE -->
        <?php
            if( !empty($instance['textmore']) ) {
                echo '<p class="focusmore">';
                    echo nl2br(htmlspecialchars_decode(apply_filters('widget_title', $instance['textmore'])) );
                echo '</p>';
            }
        ?>

            <button id="showfocus1" class="btn-services">See More</button>
            <button id="hidefocus1" class="btn-services">See Less</button>

    </div>
    </div>

// SCRIPT

/* SERVICES TOGGLE*/

;(function ($) {
    function clickHandler3() {
        $('#hidefocus1').toggle();
        $('#showfocus1').toggle();
        $('.focusmore').toggle('slow');
    }

    $(document).ready(function(){
        $('#hidefocus1, .focusmore').hide();

        $('#hidefocus1, #showfocus1').on('click', clickHandler3);
    });
})(jQuery);

Answer 1

试试这个：我已将按钮添加到按钮以显示更多或更少DEMO

 $('.focusmore').hide();

$('.hidefocus').on('click', function(){
  $(this).toggle();
  $(this).siblings('.showfocus').toggle();
  $(this).siblings('.focusmore').toggle();

});
$('.showfocus').on('click', function(){
  $(this).toggle();
  $(this).siblings('.hidefocus').toggle();
  $(this).siblings('.focusmore').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="focus-right">
                <h3 class="red-border-bottom boxeq">widget title</h3>
                <!-- FOCUS HEADING -->

                <p class="boxeq2">Lorem ipsum dolor sit amet, in laborum, diam in leo cum nunc. Cursus sollicitudin, nec varius arcu viverra dictumst volutpat tellus. Leo ac tincidunt dolor massa massa in, phasellus amet iaculis, quis pellentesque int</p>
                <!-- MORE -->
                <p class="focusmore" style="display: none;">test tset este tset etesteststestestsdfaf</p>
            <button class="btn-services showfocus" id="showfocus1" style="display: inline-block;">See More</button>
            <button class="btn-services hidefocus" id="hidefocus1" style="display: none;">See Less</button>

        </div>
        <div class="focus-right">
                <h3 class="red-border-bottom boxeq">widget title</h3>
                <!-- FOCUS HEADING -->

                <p class="boxeq2">Lorem ipsum dolor sit amet, in laborum, diam in leo cum nunc. Cursus sollicitudin, nec varius arcu viverra dictumst volutpat tellus. Leo ac tincidunt dolor massa massa in, phasellus amet iaculis, quis pellentesque int</p>
                <!-- MORE -->
                <p class="focusmore" style="display: none;">test tset este tset etesteststestestsdfaf</p>
            <button class="btn-services showfocus" id="showfocus1" style="display: inline-block;">See More</button>
            <button class="btn-services hidefocus" id="hidefocus1" style="display: none;">See Less</button>

        </div>
        <div class="focus-right">
                <h3 class="red-border-bottom boxeq">widget title</h3>
                <!-- FOCUS HEADING -->

                <p class="boxeq2">Lorem ipsum dolor sit amet, in laborum, diam in leo cum nunc. Cursus sollicitudin, nec varius arcu viverra dictumst volutpat tellus. Leo ac tincidunt dolor massa massa in, phasellus amet iaculis, quis pellentesque int</p>
                <!-- MORE -->
                <p class="focusmore" style="display: none;">test tset este tset etesteststestestsdfaf</p>
            <button class="btn-services showfocus" id="showfocus1" style="display: inline-block;">See More</button>
            <button class="btn-services hidefocus" id="hidefocus1" style="display: none;">See Less</button>

        </div>

制作特定于帖子的切换按钮

1 个答案: