大家帮忙看下拉框怎么做成这种效果。高分求教。

努力 2015-10-15 04:30:15

需求如图所示：1，图中每一项都是一个下拉菜单，选中值后，只显示内容，不显示框；
2，点击值，显示下拉菜单，供用户选择。
意思就是：下拉选中后，只显示值。点击这个值，显示下拉供用户选择。

希望大家能给个实例代码，如果能做出如图中所示的箭头效果，高分全给你。

...全文

178 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

香蕉猪 2015-10-19

打赏
举报

主要是用div替代select,,,然后就可以随意设置样式了，，，剩下的就是点击显示跟选中获取展现。。。东西不复杂。。。

vswen5 2015-10-16

打赏
举报

在每个下拉框下写个隐藏的层这个层就是放下拉内容。点击就显示这个层选中这个层中内容就隐藏并把值赋进去。很简单的

vswen5 2015-10-16

打赏
举报

引用 4 楼 lg312200538 的回复:

[quote=引用 3 楼 vswen5 的回复:] 在每个下拉框下写个隐藏的层这个层就是放下拉内容。点击就显示这个层选中这个层中内容就隐藏并把值赋进去。很简单的

能给个简单的实例吗？[/quote]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <style>
  .vsli{float: left;width: 100px;}
  .vsli span{cursor: pointer;}
  </style>
  <body>
    <ul>
                    <li class="vsli">
                        <a>1</a><span> > </span>
                        <div class="next-nav" style="display: none;">
                            <ul>
                                <li>一级</li>
                                <li>二级</li>
                                <li>三级</li>
                                <li>全部</li>
                            </ul>
                        </div>
                    </li>
                    <li class="vsli">
                        <a>2</a><span> > </span>
                        <div class="next-nav" style="display: none;">
                            <ul>
                                <li>一级</li>
                                <li>二级</li>
                                <li>三级</li>
                                <li>全部</li>
                            </ul>
                        </div>
                    </li>
                    </ul>
  </body>
  <script src="jquery-1.7.2.min.js"></script>
  
  <script>
  $(".vsli span").on("click", function () {
    $(this).next().toggle();
  });
  $(".next-nav li").on("click", function () {
    $(this).parent().parent().css("display","none");
    $(this).parents("li").find("a").html($(this).html());
});
  </script>
</html>

努力 2015-10-16

打赏
举报

引用 3 楼 vswen5 的回复:

在每个下拉框下写个隐藏的层这个层就是放下拉内容。点击就显示这个层选中这个层中内容就隐藏并把值赋进去。很简单的

能给个简单的实例吗？

努力 2015-10-15

打赏
举报

不要沉呀，高手们继续。

zpjshiwo77 2015-10-15

打赏
举报

那么炫酷的效果100分怎么够呢~~

说实话，写这种东西那么麻烦，不会有人全部写给你的。而且你都找到这种效果的网站了，down下来抄一抄css不久行了吗。至于你想要的那种JS效果，做起来也不难，我的思路是一个<span>标签和一个<select>标签，选中的时候<span>标签显示，<select>标签隐藏。然后给<span>标签添加一个点击事件，点击后<span>标签隐藏，<select>标签显示。