Question

我在一个包装器div中有几个div，它们都代表一个实体，请看图像1.

当我点击Select 1或Select 2 ....我需要打开某种下拉列表，我需要从中选择选项并更改Select的值，但此下拉列表的设计必须相同选择div项目，查看图像2.

我查看了很多jquery select插件，但我找不到。任何人都可以告诉我如何做到这一点，或者知道一个可以解决这个问题的插件。

这是html代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>test</title>
        <meta charset="utf-8">      
        <style>
            .wrapper
            {
                width:330px;
                overflow:hidden; 
                border:solid 1px gray; 
                padding: 3px;                
            }
            .element
            {
                width:80px; 
                min-height: 30px; 
                border:solid 1px black; 
                background-color: orange; 
                text-align: center;
                line-height: 30px;                
            }
            .float-left
            {
                float: left;
            }            
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="element float-left">
                Select 1
            </div>
            <div class="element float-left">                
                Select 2                
            </div>
            <div class="element float-left">
                Select 3
            </div>            
            <div class="element float-left">
                Select 4
            </div>            
        </div>

    </body>
</html>

感谢。

Answer 1

观看本教程：Simple Dropdown

UPDATE（如果想通过jquery打开）：

在我的示例中删除此css：

 .main_nav > li:hover .sub_nav{
        background-color:#E4E4E4;
        display:block;
    }

并使用jquery：

    $(".main_nav > li").click(function(){
           $(' .sub_nav').show();
          $(this).find('.sub_nav').show();
   });

Answer 2

我假设您了解Jquery库。 Demo here。我想你可以从中得到一个想法。做一些你能够完成工作的改变

 <style>
    .wrapper
    {
        width:330px;
        overflow:hidden; 
        border:solid 1px gray; 
        padding: 3px;                
    }
    .element
    {
        width:80px; 
        min-height: 30px; 
        border:solid 1px black; 
        background-color: orange; 
        text-align: center;
        line-height: 30px;                
    }
    .float-left
    {
        float: left;
    }            
</style>

<div class="wrapper">
    <div class="element float-left">
        Select 1
    </div>
    <div class="element float-left">                
        Select 2
        <div class='options'>
            <div class='element'>Option 1</div>
            <div class='element'>Option 2</div>
            <div class='element'>Option 3</div>
            <div class='element'>Option 4</div>
        </div>                
    </div>
    <div class="element float-left">
        Select 3
        <div class='options'>
            <div class='element'>Option 1</div>
            <div class='element'>Option 2</div>
            <div class='element'>Option 3</div>
            <div class='element'>Option 4</div>
        </div>  
    </div>            
    <div class="element float-left">
        Select 4
    </div>            
</div>
<script type="text/javascript">
$(document).ready(function(){
    $(".options").slideUp(0);
    $(".element").click(function(){
        $(".options").hide(0);
        $(this).find('.options').slideDown(100);
    });

});
</script>

Answer 3

因为我不喜欢任何jqwery，这里是纯js的一些解决方案。实际上，它还没有完成并抛出一些错误，但你可以随心所欲地修复它

var Ready = function(){
  var menu = document.querySelector('.wrapper');
  var elementsList = menu.querySelectorAll('.container');
  var toggleSubmenu = function(e){
    var current = e.target.parentNode.querySelector('.submenu');
    for(var i=elementsList.length; i--;){
      var element = elementsList[i].querySelector('.submenu');
      if (element!==current && element.classList.contains('opened'))
        element.classList.remove('opened');
    }
    current.classList.toggle('opened');
  };
  menu.addEventListener('click', toggleSubmenu);
};
document.addEventListener( 'DOMContentLoaded', Ready );

.wrapper {
  width: 330px;
  overflow: hidden;
  border: solid 1px gray;
  padding: 3px;
  cursor: pointer;
}
.select, .option {
  width: 80px;
  min-height: 30px;
  border:solid 1px black;
  background-color: orange;
  text-align: center;
  line-height: 30px;
  position: relative;
}
.container {
  float: left;
}
.submenu {
  position: absolute;
  height: 0;
  overflow: hidden;
}
.opened {
  height: auto;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
  <div class="wrapper">
     <div class="container">
        <div class="select">Select 1</div>
        <div class="submenu">
          <div class="option">Option 1</div>
          <div class="option">Option 2</div>
          <div class="option">Option 3</div>
        </div>
     </div>
     <div class="container">
        <div class="select">Select 2</div>
        <div class="submenu">
          <div class="option">Option 1</div>
          <div class="option">Option 2</div>
          <div class="option">Option 3</div>
        </div>
     </div>
     <div class="container">
        <div class="select">Select 3</div>
        <div class="submenu">
          <div class="option">Option 1</div>
          <div class="option">Option 2</div>
          <div class="option">Option 3</div>
        </div>
     </div>
     <div class="container">
        <div class="select">Select 4</div>
        <div class="submenu">
          <div class="option">Option 1</div>
          <div class="option">Option 2</div>
          <div class="option">Option 3</div>
        </div>
     </div>
  </div>
</body>
</html>

Divs下拉行为类似于select或combo

3 个答案: