纯div 的下拉列表怎么做（不要有li span等标签)？求指点
<divclass="page04_01_form_select"><divclass="page04_01_form_select_input"><span>场次统计—...
<div class="page04_01_form_select">
<div class="page04_01_form_select_input">
<span>场次统计 — 场次趋势</span>
<div class="page04_01_form_select_list" style="display:none;">
<div class="page04_01_form_select_oneoption onselect">场次统计 — 场次趋势</div>
<div class="page04_01_form_select_oneoption">场次统计 — 场次占比</div>
<div class="page04_01_form_select_oneoption">场次统计 — 场次趋势静安寺打火机打火机阿斯顿和结案时间和</div>
<div class="page04_01_form_select_oneoption">上座统计 — 上座占比</div>
<div class="page04_01_form_select_oneoption">趋势分析 — 场均人次</div>
<div class="page04_01_form_select_oneoption">场次统计 — 场次趋势</div>
</div>
</div>
<div class="page04_01_form_select_but listup"></div><!-- 展开后三角方向listup变listdown -->
</div> 展开
<div class="page04_01_form_select_input">
<span>场次统计 — 场次趋势</span>
<div class="page04_01_form_select_list" style="display:none;">
<div class="page04_01_form_select_oneoption onselect">场次统计 — 场次趋势</div>
<div class="page04_01_form_select_oneoption">场次统计 — 场次占比</div>
<div class="page04_01_form_select_oneoption">场次统计 — 场次趋势静安寺打火机打火机阿斯顿和结案时间和</div>
<div class="page04_01_form_select_oneoption">上座统计 — 上座占比</div>
<div class="page04_01_form_select_oneoption">趋势分析 — 场均人次</div>
<div class="page04_01_form_select_oneoption">场次统计 — 场次趋势</div>
</div>
</div>
<div class="page04_01_form_select_but listup"></div><!-- 展开后三角方向listup变listdown -->
</div> 展开
4个回答
展开全部
<script src="http://libs.useso.com/js/jquery/1.10.0/jquery.min.js"></script>
<script>
var $optList = $('.page04_01_form_select_list');
var $arrowBtn = $('.page04_01_form_select_but,.page04_01_form_select_input>span'); //下拉按钮和选项框
$arrowBtn.click(function(){
// 这里假设展开状态是listdown，收起状态是listup
var $this = $(this);
if($this.hasClass('listup')){
listDown();
}else{
listUp();
}
});
$optList.on('click', '>div', function(){
$optList.prev().text($(this).text());
listUp();
});
function listDown(){
$optList.show();
$arrowBtn.removeClass('listup').addClass('listdown');
}
function listUp(){
$optList.hide();
$arrowBtn.removeClass('listdown').addClass('listup');
}
</script>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title></title>
<style>
.d1{ background:#666; width:100px; height:30px; }
.d1:hover + div{ display:block;}
.d2{ background:#ccc; width:500px; height:200px;display:none; position:absolute;}
.d3{ background:#C90; width:1000px; height:500px;}
</style>
</head>
<body>
<div class="d1">
下拉菜单
</div>
<div class="d2">
我是下拉菜单
</div>
<div class="d3">
我是页面的底层、
</div>
</body>
</html>
上面代码 考到 文档里面 改名为 test.html 运行看效果
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div id="容器">
<div id="1"></div>
<div id="2"></div>
</div>
最简单的：先设置好样式，把2绝对定位到1正下方并display:none，然后点击1的时候把2显示出来就行了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
先写出样式，然后用js控制模拟select
追问
样式都写完了 就差js不会写。。
追答
前提是你需不需要表单提交。首先把除默认显示之外的div整体隐藏，当点击默认的后显示，然后选中下面任意一个，将选中的值用js赋值给一个hidden就ok了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
