可以创建一个div来表示下拉菜单吗？

Question

我正在使用jquery从文本文件填充下拉菜单,它工作正常.但在视觉上,我希望它看起来与众不同.

我的下拉是一个div.我想做的是让div本身可以点击,这样当你点击它时,会弹出下拉菜单选项.选择选项后,div的标签将设置为所选选项的文本.

有没有办法让下拉菜单隐藏但仍然有效？

Answer 1

如果我理解正确,你想要这个.点击这里进行演示.

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');
    });
});