效果图：
1、单个隐藏div项 html布局
<div class="question-detail active"><div class="item-handle"><span class="btn-detail">作答详情 <i class="layui-icon layui-icon-down layui-font-12"></i></span></div><div class="item-answer"><div class="item-answer-content"></div></div>
</div>2、style样式
<style type="text/css">.item-handle {height: 40px;}.question-detail .item-handle .btn-detail {-webkit-font-smoothing: antialiased;-webkit-box-orient: horizontal;-webkit-box-direction: normal;flex-direction: row;-webkit-box-align: center;align-items: center;-webkit-box-pack: center;justify-content: center;vertical-align: middle;position: relative;text-decoration: none;display: inline-block;line-height: 1;white-space: nowrap;background: #fff;-webkit-appearance: none;box-sizing: border-box;outline: none;margin: 0;transition: .1s;font-weight: 500;-webkit-user-select: none;float: right;width: 130px;height: 40.5px;text-align: center;color: #3c7af7;border: 1px solid #3c7af7;cursor: pointer;padding: 12px 20px;font-size: 14px;border-color: #fff;border-radius: 5px;}.question-detail.active .item-handle .btn-detail {float: right;width: 130px;height: 40.5px;text-align: center;color: #3c7af7;border: 1px solid #3c7af7;border-bottom-color: #fff;border-radius: 5px 5px 0 0;cursor: pointer;padding: 12px 20px;font-size: 14px;}.question-detail .item-answer {margin-top: -1px;border: 1px solid #3c7af7;padding: 15px 20px;display: none;}.question-detail.active .item-answer {display: block;}.item-answer-content {font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;-webkit-font-smoothing: antialiased;color: #2c3e50;font-size: 14px;box-sizing: border-box;margin: 0;padding: 0;min-height: 100px;}</style>
3、js控制代码
/** 点击作答详情, 通过修改css样式，控制item-answer对应div的显示与隐藏 */
$(document).on("click", ".item-handle .btn-detail", function () {var detailElem = $(this).parents(".question-detail");var isActive = detailElem.hasClass("active")if (isActive) detailElem.removeClass("active");else {detailElem.addClass("active");}
});
