javascript - 带下拉菜单

Question

我需要此菜单包含多个菜单，例如:“元素 2”。

“元素 2”打开后，“元素 1”关闭。

所有其余的都应该像现在一样工作。

箭头旋转

如果用户点击网站或子菜单，菜单保持打开状态

等等

HTML:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-
awesome/4.3.0/css/font-awesome.min.css">

<div id="container">
 Item 1<i id="icon" class="fa fa-arrow-down"></i>
</div>
<ul id="test" class="hide">
  <li>sub item 1</li>
  <li>sub item 2</li>
</ul>

CSS:

.fa-arrow-down{
transform: rotate(-90deg);
transition: transform 1s linear;
}

.fa-arrow-down.open{
transform: rotate(0deg);
transition: transform 1s linear;
}

.hide {
display:none;
}

.show {
display: inline;
}

JS:

(function(document) {
    var div = document.getElementById('container');
    var icon = document.getElementById('icon');
    var test = document.getElementById('test');
    var open = false;

    div.addEventListener('click', function() {
        if (open) {
            icon.className = 'fa fa-arrow-down';  
            test.className = 'hide';  
        } else {
            icon.className = 'fa fa-arrow-down open';
            test.className = 'show';  
        }

        open = !open;
    });
})(document);

JS Bin

Answer 1

请在以下 JS Bin 链接中找到工作解决方案

https://jsbin.com/jedulux/1/edit?html,css,js,output

我添加了 JQuery 来处理切换

$('#container').on('click', 'ul li', function() {
    $(this).find('ul').toggle()
    $(this).find('i').toggleClass('open')
});

修改后的 HTML

<div id="container" style="display:inline-block">
    <ul id="items">
      <li>
        Item 1 <i id="icon" class="fa fa-arrow-down"></i>
        <ul style="display:none">
          <li>Sub Item 1</li>
          <li>Sub Item 2</li>
        </ul>
      </li>
      <li>
        Item 2 <i id="icon" class="fa fa-arrow-down"></i>
        <ul style="display:none">
          <li>Sub Item 3</li>
          <li>Sub Item 4</li>
        </ul>
      </li> 
    </ul>
  </div>

修改后的 CSS

.fa-arrow-down{
  transform: rotate(-90deg);
  transition: transform 1s linear;
}

.fa-arrow-down.open{
  transform: rotate(0deg);
  transition: transform 1s linear;
}

.hide {
  display:none;
}

.show {
  display: block;
}

ul {
  list-style-type: none;
  padding: 0;
}

ul#items > li {
  float: left
}

ul#items > li > ul {
  position: absolute;
}

请注意，样式可能不是您所期望的，但我想您可以根据需要设置样式。

已编辑:

JS 斌:https://jsbin.com/jedulux/edit?html,css,output

JavaScript:

$('#container').on('click', 'ul li', function() {
  var self = this;
  $('#container > ul > li').each(function(index, item) {
    if (item == self) {
      $(item).find('ul').toggle()
      $(this).find('i').toggleClass('open')
    } else {
      $(item).find('ul').hide()
      $(this).find('i').removeClass('open')
    }
  })
});