一个div能否被创建成下拉菜单？

Question

我正在使用jquery从文本文件中填充下拉菜单，它正常工作。但是视觉上，我想让它看起来不同。

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

有没有办法使下拉菜单隐藏但仍可用？

- Lani1234

---

是的，有很多种方法。不幸的是，你的问题太过宽泛。试着在谷歌上搜索表单输入下拉插件。 - Joseph Marikle

你是在谈论HTML的选择元素吗？ - Muhammad Umer

有很多方法可以做到这一点；这个问题太广泛了，不适合在 Stack Overflow 上询问，但是快速搜索会显示很多插件和指南，供您自己实现。 - Dave

这是一个比较宽泛的问题。也许你想要将 select 元素样式化并使其正常工作。可以尝试搜索相关内容。 - Sunny Patel

@Muhammad Umer 是的，一个HTML选择元素。 - Lani1234

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

- user3518892

---

我将为您创建这个演示，希望它对您有用 JsFiddle。 - user3076482

Answer 2

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

基本上，您可以通过查找具有选定类的 div 来选择哪个 div 被选择，并且您可以分配数据属性以获取其他值。

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

- Muhammad Umer

---

这样应该能行。但如果我使用对象为我的选择选项提供JSON值，如何使功能像下拉菜单一样，以便我可以对所选选项进行某些操作？ - Lani1234

为了回答我的问题，我认为我可以将相同的对象值分配给li值属性。 - Lani1234