折叠效果，箭头由右变下

最新推荐文章于 2022-03-19 23:08:17 发布

原创最新推荐文章于 2022-03-19 23:08:17 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#url #class

个人日记专栏收录该内容

108 篇文章

订阅专栏

这里写图片描述

<style>
        .arrow1{background:url("img/xiangyou.png") no-repeat;display: inline-block;height: 20px;width: 20px;}
        .arrow2{background:url("img/xiangxia.png") no-repeat;}
</style>

 <ul class="dish_order_info" id="orderList">
            <li class="dishId"><!--动态生成  class 为菜的Id  以下内容全部为动态生成-->
                <div>
                    <span class="dish_order_info_name"><i class="arrow1" alt="" id="img" onclick="tabimg(this);"></i>富贵花肉</span>
                    <span class="dish_order_info_price">12</span>
                    <div class="dish_order_info_num">
                        <i class="fa fa-minus"></i>
                            <span>1</span>
                        <i class="fa fa-plus"></i>
                    </div>
                    <div class="dish_order_info_img" data-toggle="modal" data-target="#myModal"><img src="img/jishiben32.png" alt=""/></div>
                </div>
                <ul class="dish_remark RemarkText" style="display: none;"><!--菜的备注的动态生成-->
                    <li>油：中油</li>
                    <li>辣：中辣</li>
                </ul>
                <input type="hidden"  value="{'nameID:12',dishnum':12,'dishprice':222,dishremark:'123';}" /> <!--rmg= remark_group_no rm=remarkId-->
            </li>
        </ul>

注意样式和 I标签<i class="arrow1" alt="" id="img" onclick="tabimg(this);"></i> 就是用toggleClass();这个方法来结账；

<script>
function tabimg(_this){
        $(_this).toggleClass("arrow2");
        if($(_this).hasClass("arrow2")){
            $(_this).parents("li").find("ul").show();
        }else{
            $(_this).parents("li").find("ul").hide();
        }
    }
</script>

第二个方法：这里是直接就是JS来操作不需要样式来控制把I标签换成IMG标签。

<img src="img/xiangyou.png" alt="" id="img" onclick="tabimg(this);">


 <ul class="dish_order_info" id="orderList">
            <li class="dishId"><!--动态生成  class 为菜的Id  以下内容全部为动态生成-->
                <div>
                    <span class="dish_order_info_name"><img src="img/xiangyou.png" alt="" id="img" onclick="tabimg(this);">富贵花肉</span>
                    <span class="dish_order_info_price">12</span>
                    <div class="dish_order_info_num">
                        <i class="fa fa-minus"></i>
                            <span>1</span>
                        <i class="fa fa-plus"></i>
                    </div>
                    <div class="dish_order_info_img" data-toggle="modal" data-target="#myModal"><img src="img/jishiben32.png" alt=""/></div>
                </div>
                <ul class="dish_remark RemarkText" style="display: none;"><!--菜的备注的动态生成-->
                    <li>油：中油</li>
                    <li>辣：中辣</li>
                </ul>
                <input type="hidden"  value="{'nameID:12',dishnum':12,'dishprice':222,dishremark:'123';}" /> <!--rmg= remark_group_no rm=remarkId-->
            </li>
        </ul>

    function tabimg(_this){  //展开备注
        var imgPath=$(_this).attr("src");
        if(imgPath=='img/xiangxia.png'){
            $(_this).attr('src','img/xiangyou.png');
            $(_this).parent().siblings('ul').hide();
        }else{
            $(_this).attr('src','img/xiangxia.png');
            $(_this).parent().siblings('ul').show();
        }
    }