可以创建一个 div 来充当下拉列表吗? [英] Can a div be created to act like a dropdown?

问题描述

我正在使用 jquery 从文本文件中填充下拉菜单，并且工作正常.但在视觉上，我希望它看起来不一样.

我的下拉列表在一个 div 中.我想要做的是使 div 本身可点击，这样当您点击它时，下拉菜单选项会弹出.当一个选项被选中时，div 的标签被设置为选中选项的文本.

有什么办法可以隐藏下拉菜单但仍然可以使用吗?

解决方案

如果我理解正确，你想要这个.单击此处查看演示.

HTML

 登录<ul class="下拉菜单"><li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li><li><a href="#"><i class="icon-github icon-large"></i>Github</a></li><li><a href="#"><i class="icon-facebook icon-large"></i>Facebook</a></li>

CSS

*,*:after,*:before {box-sizing: 边框框；}.wrapper-dropdown-2 {位置:相对；宽度:200px；边距:0 自动；填充:10px 15px；/* 样式 */背景:#fff;左边框:5px 纯灰色；光标:指针；大纲:无；}.wrapper-dropdown-2:after {内容: "";宽度:0；高度:0；位置:绝对；右:16px；顶部:50%；边距顶部:-3px；边框宽度:6px 6px 0 6px；边框样式:实心；边框颜色:灰色透明；}.wrapper-dropdown-2 .dropdown {/* 大小 &位置 */位置:绝对；顶部:60%；左:-45px；右:0px；/* 样式 */背景:白色；过渡:所有 0.3 秒缓出；列表样式:无；/* 隐藏 */不透明度:0；指针事件:无；}.wrapper-dropdown-2 .dropdown li a {显示:块；文字装饰:无；颜色:#333；左边框:5px 实心；填充:10px；过渡:所有 0.3 秒缓出；}.wrapper-dropdown-2 .dropdown li:nth-child(1) a {边框左颜色:#00ACED；}.wrapper-dropdown-2 .dropdown li:nth-child(2) a {边框左颜色:#4183C4；}.wrapper-dropdown-2 .dropdown li:nth-child(3) a {左边框颜色:#3B5998；}.wrapper-dropdown-2 .dropdown li i {右边距:5px；颜色:继承；垂直对齐:中间；}/* 悬停状态 */.wrapper-dropdown-2 .dropdown li:hover a {颜色:灰色；背景颜色:深灰色；}.wrapper-dropdown-2.active:after {边框宽度:0 6px 6px 6px；}.wrapper-dropdown-2.active .dropdown {不透明度:1；指针事件:自动；}

JavaScript

function DropDown(el) {this.dd = el;this.initEvents();}DropDown.prototype = {初始化事件:函数(){var obj = this;obj.dd.on('click', function(event){$(this).toggleClass('active');event.stopPropagation();});}}$(函数(){var dd = new DropDown( $('#dd') );$(document).click(function() {$('.wrapper-dropdown-2').removeClass('active');});});

I am using jquery to populate a dropdown menu from a text file and it is working fine. But visually, I would like it to look different.

My dropdown is in a div. What I would like to do is make the div itself clickable so that when you click it, the dropdown menu options pop up. And when an option is selected, the div's label is set to the text of the selected option.

Is there someway to make the dropdown menu hidden but still functional?

解决方案

If I understand correctly, you want this. Click here for a DEMO.

HTML

<div id="dd" class="wrapper-dropdown-2">Sign in with
  <ul class="dropdown">
    <li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li>
    <li><a href="#"><i class="icon-github icon-large"></i>Github</a></li>
    <li><a href="#"><i class="icon-facebook icon-large"></i>Facebook</a></li>
  </ul>
</div>

CSS

*,*:after,*:before {
    box-sizing: border-box;
}
.wrapper-dropdown-2 {
    position: relative;
    width: 200px;
    margin: 0 auto;
    padding: 10px 15px;

    /* Styles */
    background: #fff;
    border-left: 5px solid grey;
    cursor: pointer;
    outline: none;
}
.wrapper-dropdown-2:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: grey transparent;
}
.wrapper-dropdown-2 .dropdown {
  /* Size & position */
    position: absolute;
    top: 60%;
    left: -45px;
    right: 0px;

    /* Styles */
    background: white;
    transition: all 0.3s ease-out;
    list-style: none;

    /* Hiding */
    opacity: 0;
    pointer-events: none;
}
.wrapper-dropdown-2 .dropdown li a {
    display: block;
    text-decoration: none;
    color: #333;
    border-left: 5px solid;
    padding: 10px;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-2 .dropdown li:nth-child(1) a { 
    border-left-color: #00ACED;
}

.wrapper-dropdown-2 .dropdown li:nth-child(2) a {
    border-left-color: #4183C4;
}

.wrapper-dropdown-2 .dropdown li:nth-child(3) a {
    border-left-color: #3B5998;
}

.wrapper-dropdown-2 .dropdown li i {
    margin-right: 5px;
    color: inherit;
    vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-2 .dropdown li:hover a {
    color: grey;
    background-color: darkgrey;
}
.wrapper-dropdown-2.active:after {
    border-width: 0 6px 6px 6px;
}

.wrapper-dropdown-2.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

JavaScript

function DropDown(el) {
  this.dd = el;
  this.initEvents();
}
DropDown.prototype = {
  initEvents : function() {
    var obj = this;
    obj.dd.on('click', function(event){
      $(this).toggleClass('active');
      event.stopPropagation();
    }); 
  }
}
$(function() {
  var dd = new DropDown( $('#dd') );
    $(document).click(function() {
      $('.wrapper-dropdown-2').removeClass('active');
    });
});

这篇关于可以创建一个 div 来充当下拉列表吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！