可以创建一个 div 来充当下拉菜单吗？

Question

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

我的下拉菜单在一个 div 中。我想做的是让 div 本身可点击，这样当你点击它时，下拉菜单选项就会弹出。并且当一个选项被选中时，div的标签被设置为所选选项的文本。

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

Answer 1

如果我理解正确，你想要这个。 单击此处获取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');
    });
});

Answer 2

这里看看：http://jsfiddle.net/4Zw32/

基本上，您可以通过搜索选择了类的 div 来选择选择哪个 div，您可以分配 data 属性以获得附加值。

CSS

* { margin: 0;  padding: 0; }

.sel {
    color:white;
    width: 250px;
    min-height: 40px;
    box-sizing: border-box;
    background-color: #55E6FA;
    overflow: hidden;
}
.txt { padding: 10px; }
.selected { background-color: #31A9B9; }
.hide { display: none; }
.sel .options div:hover { background-color: #31A9B9; }

.sel .options {
    width: 250px;
    background-color: #66f7FB;
}
.sel .options div {
    transition: all 0.2s ease-out;
    padding: 10px;
}

jQuery

var sel = $('.sel'),
    txt = $('.txt'),
    options = $('.options');

sel.click(function (e) {
    e.stopPropagation();
    options.show();
});

$('body').click(function (e) {
    options.hide();
});

options.children('div').click(function (e) {
    e.stopPropagation();
    txt.text($(this).text());
    $(this).addClass('selected').siblings('div').removeClass('selected');
    options.hide();
});