tab切换效果

tab切换

    <div class="kblk">
        <li class="">
            <div class="kblk-j kblk1">
                <img src="./images/maintenance/maj_list1.jpg" alt="">

                <div class="kuang">
                    <span class="tese1">工艺特色一</span>
                    <hr>
                    <span class="tese2">珠光皮养护技术</span>
                    <img src="./images/maintenance/maj_icon.png" alt="" class="fanzhuan">
                </div>
            </div>
            <div class="tsxq1">
                
                <span>翻新前：光泽效果通过附着在皮面的珠光粉展现，汗液和摩擦使珠光粉脱落，皮面脱色发黄 </span>
                <hr>
                <span>翻新后：重新喷漆。复着高位数珠光粉，使包包出现珠宝般的光泽，重回皮革面料的精品质感。</span>
                <div class="xiufutu1">
                    <img src="./images/maintenance/list1_img1.png" class="xiufuqian1" alt="">
                    <img src="./images/maintenance/list1_img2.png" class="xiufuqian1" alt="">
                </div>
                <p class="p">Before</p>
                <h5 class="p2">Afters</h5>
            </div>
        </li>
        <li>
            <div class="kblk-o kblk1">
                <img src="./images/maintenance/maj_list2.jpg" alt="">
                <div class="kuang2">
                    <span class="tese1">工艺特色二</span>
                    <hr>
                    <span class="tese2">植鞣革养护技术</span>
                    <img src="./images/maintenance/maj_icon.png" alt="" class="fanzhuan">
                </div>
            </div>
            <div class="tsxq1">
                
                <span>翻新前：光泽效果通过附着在皮面的珠光粉展现，汗液和摩擦使珠光粉脱落，皮面脱色发黄 </span>
                <hr>
                <span>翻新后：重新喷漆。复着高位数珠光粉，使包包出现珠宝般的光泽，重回皮革面料的精品质感。</span>
                <div class="xiufutu2">
                    <img src="./images/maintenance/list2_img1.png" class="xiufuqian1" alt="">

                    <img src="./images/maintenance/list2_img2.png" class="xiufuqian1" alt="">
                </div>

                <p class="p3">Before</p>
                <h5 class="p4">Afters</h5>

            </div>
        </li>
        <li>
            <div class="kblk-y kblk1">
                <img src="./images/maintenance/maj_list3.jpg" alt="">
                <div class="kuang3">
                    <span class="tese1">工艺特色三</span>
                    <hr>
                    <span class="tese2">绒面皮修复养护</span>
                    <img src="./images/maintenance/maj_icon.png" alt="" class="fanzhuan">
                </div>
            </div>
            <div class="tsxq1">
               
                <span>翻新前：光泽效果通过附着在皮面的珠光粉展现，汗液和摩擦使珠光粉脱落，皮面脱色发黄 </span>
                <hr>

                <span>翻新后：重新喷漆。复着高位数珠光粉，使包包出现珠宝般的光泽，重回皮革面料的精品质感。</span>
                <div class="xiufutu3">
                    <img src="./images/maintenance/list3_img1.png" class="xiufuqian1" alt="">
                    <img src="./images/maintenance/list3_img2.png" class="xiufuqian1" alt="">
                </div>

                <p class="p5">Before</p>
                <h5 class="p6">Afters</h5>
            </div>
    </div>
    </li>

</div>






    <script>
        //在jq   事件委托里面    this指向它本身  
        $(".kblk li").on("click", ".kblk1", function() {
            // console.log($(".kblk li"))
            // parent();
            // console.log($(this).parents('.kblk'))
            // console.log($(this).parent().parent())
            // if ($(this).parent().children('.tsxq1').is(":hidden")) {
            //     // $(this).parent().children('.tsxq1').show()
            //     // $(this).parent().siblings('li').children('.tsxq1').hide()
            // } else {
            //     // $(this).parent().children('.tsxq1').hide()
            // }

            // 1 首先判断.tsxq1是否显示 如果隐藏 点击.kblk1 让.tsxq1显示 然后 li的下一个兄弟元素的.tsxq1
            // 隐藏
            // 2 相反.tsxq1是否显示 如果显示 则hide() 直接隐藏




            if ($(this).parent().children(".tsxq1").is(':hidden')) {
                $(this).parent().children('.tsxq1').show();
                // console.log($(this).parent().find('.fanzhuan'))
                $(this).parent().find('.fanzhuan').css('transform', 'rotate(0.5turn)')
                $(this).parent().siblings('li').children('.tsxq1').hide();
                $(this).parent().siblings('li').find('.fanzhuan').css('transform', 'rotate(0.5turn)')
            } else {
                $(this).parent().children('.tsxq1').hide();
                $(this).parent().find('.fanzhuan').css('transform', 'rotate(0turn)')
            }
        })
    </script>