Question

我需要此菜单才能有多个菜单ex：＆＃34; Item 2＆＃34;。

一次＆＃34;项目2＆＃34;打开＆＃34;项目1＆＃34;关闭。

所有其余部分应该可以正常工作。

箭头旋转

如果用户点击网站或子菜单，

菜单会保持打开状态

等

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

https://stackoverflow.com/a/16689513/7767664

Answer 1

请在以下JS Bin Link找到工作解决方案

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

Answer 2

也许这可以解决您的问题：

<强> HTML

<div id="container">
  Item 1<i id="icon" class="fa fa-arrow-down"></i>
</div>  
<ul id="test" class="hide">
  <li>
    <div id="containers1">
      Item 1-1<i id="icons1" class="fa fa-arrow-down"></i>
    </div>
    <ul id="tests1" class="hide">
      <li>Item 1-1-1</li>
      <li>Item 1-1-2</li>
    </ul>
  </li>
  <li>
    <div id="containers2">
      Item 1-2<i id="icons2" class="fa fa-arrow-down"></i>
    </div>
    <ul id="tests2" class="hide">
      <li>Item 1-1-1</li>
      <li>Item 1-2-2</li>
    </ul>
  </li>
</ul>

您当然可以使用classes并使用parent element和child element选择器来进一步简化它（我没有足够的时间用于它。）

<强> 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;
}

JavaScript （没有jQuery）

(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;
  });
  var divs1 = document.getElementById('containers1');
  var icons1 = document.getElementById('icons1');
  var tests1 = document.getElementById('tests1');
  var opens1 = false;
  divs1.addEventListener('click', function(){
    if(opens1){
      icons1.className = 'fa fa-arrow-down';  
      tests1.className = 'hide';  
    }
    else{
      icons1.className = 'fa fa-arrow-down open';
      tests1.className = 'show';  
    }
    opens1 = !opens1;
  });
  var divs2 = document.getElementById('containers2');
  var icons2 = document.getElementById('icons2');
  var tests2 = document.getElementById('tests2');
  var opens2 = false;
  divs2.addEventListener('click', function(){
    if(opens2){
      icons2.className = 'fa fa-arrow-down';  
      tests2.className = 'hide';  
    }
    else{
      icons2.className = 'fa fa-arrow-down open';
      tests2.className = 'show';  
   }    
   opens2 = !opens2;
 });
})(document);

这里使用类等会有所帮助（比如我制作了3个单独的函数，但是，使用类会缩短为1）。

包括此

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

Answer 3

没有jquery，但我写的是我自己的逻辑而不是你的;

加载font-awesome.css的一些问题;逻辑上，代码是可靠的;

注意：您可能感觉不到代码段中的箭头移动;复制到HTML并看到它正常工作。

希望没关系。

var icon = document.getElementById('icon');
      var icon1 = document.getElementById('icon1');
      var test = document.getElementById('test');
      var test1 = document.getElementById('test1');
      var secondMenuOpen = false;
      var firstMenuOpen = false;

      icon.onclick = function() {
        if(!firstMenuOpen)  openFirstMenu();
        else  closeFirstMenu();
      }

      icon1.onclick = function() {
        if(!secondMenuOpen) openSecondMenu();
        else closeSecondMenu();
        checkFirstMenu();
      }

      function checkFirstMenu() {
        if(firstMenuOpen) closeFirstMenu();
      }

      function closeFirstMenu() {
        icon.classList.remove('open');
        test.classList.add('hide');
        firstMenuOpen = false;
      }

      function openFirstMenu() {
          icon.classList.add('open');
          test.classList.remove('hide');
          firstMenuOpen = true;
      }

      function closeSecondMenu() {
          icon1.classList.remove('open');
          test1.classList.add('hide');
          secondMenuOpen = false;
      }

      function openSecondMenu() {
          icon1.classList.add('open');
          test1.classList.remove('hide');
          secondMenuOpen = true;
      }

.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;
}

<link rel="stylesheet" href="https://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>

    <div id="container1">
     Item 2<i id="icon1" class="fa fa-arrow-down"></i>
    </div>
    <ul id="test1" class="hide">
      <li>sub item 1</li>
      <li>sub item 2</li>
    </ul>

带下拉菜单

3 个答案: