带下拉菜单

Question

I need this menu to have more than one Menu ex: "Item 2".

Once "Item 2" opens the "Item 1" closes.

All the rest should work as it works now.

arrow rotates

menu stay open if user clicks in the website or sub menus

etc

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

please find working solution at following JS Bin Link

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

I have added JQuery for handling toggling

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

Modified 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>

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

Please note that styling may be not what you have expected, but I guess you can style it as per your need.

Edited:

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

Maybe this would solve your problem:

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>

You can of course use classes and use parent element and child element selectors to further simplify it (I did not have enough Time for it.)

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

Here is where using classes, etc. would have helped (like I made 3 separate functions, however, using classes would shorten to 1).

Include this

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

Answer 3

No jquery, but I have written my own logic instead of yours;

Some issue with loading font-awesome.css; logic wise the code is solid;

Note: You may not feel the arrow movement in snippet; copy into html and see it working.

Hope that's OK.

 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>