折叠效果,箭头由右变下

折叠效果,箭头由右变下_第1张图片
折叠效果,箭头由右变下_第2张图片

<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">
                <div>
                    <span class="dish_order_info_name"><i class="arrow1" alt="" id="img" onclick="tabimg(this);">i>富贵花肉span>
                    <span class="dish_order_info_price">12span>
                    <div class="dish_order_info_num">
                        <i class="fa fa-minus">i>
                            <span>1span>
                        <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';}" /> 
            li>
        ul>

注意样式和 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">
                <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">12span>
                    <div class="dish_order_info_num">
                        <i class="fa fa-minus">i>
                            <span>1span>
                        <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';}" /> 
            li>
        ul>

JS

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

你可能感兴趣的:(个人日记)