js和css实现点击显示下拉框

js和css实现点击显示下拉框

附加效果，鼠标悬浮高度增加，实现上下增长。
先看效果：

1，用定位实现高度增长时向上下延伸：

鼠标移动上去或被点击时，设置增加高度，正常情况下盒子的高度会向下增加，这时候加上定位，向上移动一定的距离，补消向下扩展高度的距离，视觉上实现上下延伸。

<div class="box1">
        <div class="bb"></div>
</div>

.box1 {
        position: relative;
        top: 300px;
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: rgb(39, 192, 238);
    }

    .bb {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: #33f133;
    }

    .box1:hover {
        /* 向上移动100px  */
        top: 200px;     
        /* width: 400px; */
        height: 400px;
        background-color: rgb(245, 166, 49);
        border: 5px solid #33f133;
        transition: all 1s;
    }

2， 鼠标点击按钮显示下拉内容。

细节： 鼠标移动到整个区域上，盒子【背景色变化】、【出现绿色边框】，【移出消失】；点击按钮后【显示下拉内容】，【背景色复原】，【边框还在】，鼠标【移出边框消失】。

分析： 为了实现这个效果，我们需要把【背景色变化】和【出现边框】分开；一开始该大盒子的className为“des_pic des_pic_h”,指定des_pic_h:hover(鼠标悬浮更改背景色，设置边框)，被点击后通过js追加一个className ( 如本例 click_1 )增加大盒子高度实现下拉显示,同时去除 des_pic_h;这时候鼠标悬浮在大盒子上也不会有变化，但是我们还是需要看边框的，对click_1: hover的className设置边框样式即可。

点击按钮 (向下的图标) 显示下拉内容： 通过js完成。

(1) 本例只能通过点击按钮实现效果，点击空白区域无效。

(2) 点击了一个下拉显示之后即固定下来，再次点击按钮收起。为了防止同时显示两个下拉内容，每次点击之后清空所有元素的设置了显示样式的classNam（即click_1）。（排他思想）

(3) 每一次点击之后判断是否已经打开显示（通过给每一个元素设置一个bool的flag标志，显示为true，关闭为false）。

部分关键代码如下

  <div href="#" class="des_pic des_pic_h">
        <img src="upload-pic/Layer-1.png" alt="" class="layer">
        <div class="destination">
            <span>Spectacular Seychelles</span> <br>
            <span>New Destination!</span>
            <div class="drop_m">
                <div class="drop_m_n drop_m_n1">
                    <span></span>
                    <p>10℃ Rainy</p>
                </div>
                <div class="drop_m_n drop_m_n2">
                    <span></span>
                    <p>$765*</p>
                </div>
                <div class="drop_m_n drop_m_n3">
                    <span></span>
                    <p>8days/7nights</p>
                </div>
            </div>
            <p id="expires">Expires in: 7 days</p>
        </div>
        <span class="down"></span>
    </div>

/* ******************   动效一，鼠标放上去的效果  ************ */

.des_pic_h:hover {
    position: relative;
    top: -38px;   
    height: 304px;
    border: 5px solid rgb(29, 210, 175);
    background-color: #2c3e50;
    transition: all .4s;  
}
/* 被点击之后整个盒子的class为 “des_pic click_1” */
.click_1:hover {
    border: 5px solid rgb(29, 210, 175);
}

.des_pic_h:hover img {
    height: 228px;
    transform: scaleX(1.3);
    transition: all .4s;
    /* transform-origin: bottom; */

}
.des_pic_h:hover .destination span {
    color: #fff;
}
.des_pic_h:hover .down {
    transition: all .6s;

    color: #fff;;
}
.des_pic_h:hover .destination span:nth-child(3) {
    color: #8899a8;
}
.des_pic_h:hover .destination {
    transition: all .4s;
    top: 242px;
}

/* -------------点击效果按钮后的效果 ------------------- */
.click_1 {
    position: relative;
    top: -92px;
    height: 486px;
    border: 5px solid rgb(255, 255, 255);
    background-color: rgb(238, 238, 238);
    transition: all .4s;
}
.click_2 {
    transition: all .4s;
    top: 240px;
}
.click_3 {
    height: 228px;
    transform: scaleX(1.3);
    transition: all .4s;
   
}

// ------------------------------------------  动效 1  -----------------------------

var down = document.getElementsByClassName("down");         //按钮
var des = document.getElementsByClassName("des_pic");         // 大盒子
var des_w = document.getElementsByClassName("destination");   // 其中一个小盒子，为了设置定位
var layer = document.getElementsByClassName("layer");         // 图片，实现鼠标移出图片大小不变
var len = down.length;
for (i = 0; i < len; i++) {
    down[i].bool = false;                          // 一个flag标志，标志下拉内容是否为显示状态
    down[i].onclick = function () {
        if (this.bool == false) {                          // 判断，如果未被点击

            for (j = 0; j < len; j++) {                    //每次都初始化，实现点击其他按钮可以清空已经被点击的效果
                des[j].className = "des_pic des_pic_h";
                des_w[j].className = "destination";
                layer[j].className = "layer";
                down[j].innerHTML = "";
                down[j].bool = false;      
            }
            this.bool = true;
            for (k = 0; k < len; k++) {
                if (down[k].bool == true) {
                    des[k].className = "des_pic click_1";     //使得整个盒子高度变大，同时向上移动
                    des_w[k].className += " click_2";         // 调整其中的一个文本定位，
                    layer[k].className += " click_3";         // 图片大小
                    down[k].innerHTML = "";                  //修改文本内容，即使得箭头图标由上向下
                }
            }

        } else {                                             // 否则，已被点击
            for (k = 0; k < len; k++) {
                if (down[k].bool == true) {
                    des[k].className = "des_pic des_pic_h";
                    des_w[k].className = "destination";
                    layer[k].className = "layer";
                    down[k].innerHTML = "";        
                    this.bool = false;
                }

            }

        }
    }
}