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

Posted 2023-05-08

【中文标题】可以创建一个 div 来充当下拉菜单吗？

【英文标题】：Can a div be created to act like a dropdown?

【发布时间】：2014-06-15 23:34:26

【问题描述】：

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

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

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

【问题讨论】：

是的。很多方法。不幸的是，你的问题太宽泛了。尝试在谷歌中寻找表单输入下拉插件。

你是在说html选择元素吗

有一百万种方法可以做到这一点；对于 Stack Overflow 来说太宽泛了，但快速搜索会发现很多插件和指南供您自己完成。

这是一个广泛的问题。也许您希望根据自己的喜好设置select 元素的样式并像往常一样操作。尝试搜索。

@Muhammad Umer 是的，一个 html 选择元素

【参考方案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');
    );
);

【讨论】：

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

【参考方案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();
);

【讨论】：

这应该可以。但是，如果我使用 Objects 为我的选择选项提供 JSON 值，我怎样才能获得类似于下拉菜单的功能？

回答我自己的问题，我想我可以将相同的对象值分配给 li 值属性。