layui动态生成的手风琴实现默认第一个展开+鼠标悬浮展开

嘿嘿嘿，我百度了一下，发现没有这个玩意，作为小白白的我自己摸索着成功实现了，今日好开心～耶耶耶！

首先，我是从数据库提取数据，在前端用foreach循环展示，但是，循环出来的都是统一样式，要不都是展开，要不都是折叠。

• 全部折叠：

<div class="layui-colla-content">

 <div class="layui-collapse" lay-accordion="">
            <c:forEach items="${guanchaList}" var="guanchaList">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" style="height: 40px;background-color: #c16811;margin-bottom: 0px"> ${guanchaList.title}</h2>
                    <div class="layui-colla-content">
                        <div style="width: 220px">
                            <a href="#">
                        <img src="/upload/${guanchaList.photo}" width="220px;">
                          <span class="obeser_title" style="font-size: small">${guanchaList.title}</span></a>
                        </div>
                    </div>
                </div>
            </c:forEach>

        </div>

• 全部展开（就是加了layui-show）

<div class="layui-colla-content layui-show">

 <div class="layui-collapse" lay-accordion="">
            <c:forEach items="${guanchaList}" var="guanchaList">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" style="height: 40px;background-color: #c16811;margin-bottom: 0px"> ${guanchaList.title}</h2>
                    <div class="layui-colla-content layui-show">
                        <div style="width: 220px">
                            <a href="#">
                        <img src="/upload/${guanchaList.photo}" width="220px;">
                          <span class="obeser_title" style="font-size: small">${guanchaList.title}</span></a>
                        </div>
                    </div>
                </div>
            </c:forEach>

        </div>

• 循环出来默认第一个展开

<div class="layui-colla-content obser_collapse">

<div class="layui-collapse" lay-accordion="">
            <c:forEach items="${guanchaList}" var="guanchaList">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title" style="height: 40px;background-color: #c16811;margin-bottom: 0px"> ${guanchaList.title}</h2>
                    <div class="layui-colla-content obser_collapse">
                        <div style="width: 220px">
                            <a href="#">
                        <img src="/upload/${guanchaList.photo}" width="220px;">
                          <span class="obeser_title" style="font-size: small">${guanchaList.title}</span></a>
                        </div>
                    </div>
                </div>
            </c:forEach>

        </div>

$(document).ready(function () {
    $(".obser_collapse:first").addClass("layui-show");

});

• 鼠标悬浮展开，比如鼠标放到第二个，那么其他几个关闭，第二个展开

layui.use('element', function () {
    let $ = layui.jquery
        , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    
    $(".layui-collapse .layui-colla-item").hover(function () {
        var $i = $(this).index();
        $(".layui-collapse .layui-colla-item .layui-colla-content").removeClass("layui-show");
        $(".layui-collapse .layui-colla-item .layui-colla-content").eq($i).addClass("layui-show").siblings().removeClass("layui-show");
    });
})

嘿嘿嘿～