как отобразить элементы подменят в этом раскрывающегося меню

function rotateIcon(m) { 
 
    var key = m; 
 
if (key === 1) 
 
    { 
 
    
 
    if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-chevron-right") 
 
    { 
 
     
 
     document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
     
 
     } 
 
    else 
 
     { 
 
     document.getElementById("first-drop-down-icon").className = "spinner-icon in fa fa-chevron-right"; 
 
     document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
     document.getElementById("third-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
      document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
     } 
 
    
 
    
 
    } 
 
    else if(key === 2) 
 
    { 
 
     if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-chevron-right") 
 
    { 
 
     
 
     document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-chevron-right"; 
 
     } 
 
    else 
 
     { 
 
     document.getElementById("second-drop-down-icon").className="spinner-icon in fa fa-chevron-right"; 
 
     document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
      document.getElementById("third-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
      document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
     } 
 
     } 
 
else if(key === 3) 
 
    { 
 
     if(document.getElementById("third-drop-down-icon").className=="spinner-icon in fa fa-chevron-right") 
 
    { 
 
     
 
     document.getElementById("third-drop-down-icon").className="spinner-icon out fa fa-chevron-right"; 
 
     } 
 
    else 
 
     { 
 
     document.getElementById("third-drop-down-icon").className="spinner-icon in fa fa-chevron-right"; 
 
     document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
      document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
      document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
     } 
 
     } 
 
    else if(key === 4) 
 
    { 
 
     if(document.getElementById("fourth-drop-down-icon").className=="spinner-icon in fa fa-chevron-right") 
 
    { 
 
     
 
     document.getElementById("fourth-drop-down-icon").className="spinner-icon out fa fa-chevron-right"; 
 
     } 
 
    else 
 
     { 
 
     document.getElementById("fourth-drop-down-icon").className="spinner-icon in fa fa-chevron-right"; 
 
     document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
      document.getElementById("third-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
      document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
     } 
 
     } 
 
    else{ 
 
     document.getElementById("third-drop-down-icon").className="spinner-icon out fa fa-chevron-right"; 
 
     document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-chevron-right"; 
 
     document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
     document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
 
    } 
 
} 
 

 
//----------------------------display sub menu starts here---------------------------------------------------// 
 

 
function displaySubMenu(e) { 
 
    var k = e; 
 
    if (k === 1) { 
 
     if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-chevron-right"){ 
 
      document.getElementById("sub-menu-one").style.display= ""; 
 
      alert("hai i'm in,you don't see me?"); 
 
     } 
 
     else{ 
 
     document.getElementById("sub-menu-one").style.display = "block"; 
 
     alert("bro..this is my problem,the sub menu is not displaying...!"); 
 
     document.getElementById("sub-menu-two").style.display = ""; 
 
     document.getElementById("sub-menu-three").style.display = ""; 
 
     document.getElementById("sub-menu-four").style.display = ""; 
 
     } 
 
    } else if (k === 2) { 
 
     if(document.getElementById("second-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){ 
 
       document.getElementById("sub-menu-two").style.display= ""; 
 
     } 
 
     else{ 
 
     document.getElementById("sub-menu-two").style.display = "block"; 
 
     document.getElementById("sub-menu-one").style.display = ""; 
 
     document.getElementById("sub-menu-three").style.display = ""; 
 
     document.getElementById("sub-menu-four").style.display = "";} 
 
    } else if (k === 3) { 
 
     if(document.getElementById("third-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){ 
 
       document.getElementById("sub-menu-three").style.display= ""; 
 
     } 
 
     else{ 
 
     document.getElementById("sub-menu-three").style.display = "block"; 
 
     document.getElementById("sub-menu-one").style.display = ""; 
 
     document.getElementById("sub-menu-two").style.display = ""; 
 
     document.getElementById("sub-menu-four").style.display = "";} 
 
    } else if (k === 4) { 
 
     if(document.getElementById("fourth-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){ 
 
       document.getElementById("sub-menu-four").style.display= ""; 
 
     } 
 
     else{ 
 
     document.getElementById("sub-menu-four").style.display = "block"; 
 
     document.getElementById("sub-menu-one").style.display = ""; 
 
     document.getElementById("sub-menu-three").style.display = ""; 
 
     document.getElementById("sub-menu-two").style.display = "";} 
 
    } else { 
 
     document.getElementById("sub-menu-one").style.display = ""; 
 
     document.getElementById("sub-menu-two").style.display = ""; 
 
     document.getElementById("sub-menu-three").style.display = ""; 
 
     document.getElementById("sub-menu-four").style.display = ""; 
 
    } 
 
}

.menu-part{ 
 
     margin-top: 120px; 
 
    } 
 
    .menu-parent{ 
 
     color: #a6afbb; 
 
     font-size: 13px; 
 
     font-weight: 600; 
 
     text-transform: uppercase; 
 
     letter-spacing: 0.05rem; 
 
     padding: 12px 15px!important; 
 
     margin: 20px 0 0 -15px; 
 
     font-family: 'Poppins',sans-serif; 
 
    } 
 
    .sub-menu{ 
 
     display: none; 
 
    } 
 
    .sub-menu-parent{ 
 
     padding-left: 10px; 
 
     padding-top: 25px; 
 
     font-weight: 300; 
 
     color: black; 
 
    } 
 
    .sub-menu-header{ 
 
     /* float: left;*/ 
 
     padding-left:11px; 
 
     font-weight: 300; 
 
     font 
 
    } 
 
    .fa.spinner-icon{ 
 
     float: right; 
 
     padding-right: 0px; 
 
     font-weight: 100; 
 
    } 
 
    .fa-sliders.menu-front-icon{ 
 
     transform: rotate(90deg); 
 
    } 
 
    .sub-menu-parent:hover{ 
 
     cursor: pointer; 
 
    } 
 
    .spinner-icon{ 
 
      /* font-size:13px; 
 
      float: right; 
 
      margin-top: 5%; 
 
      margin-right: 7%;*/ 
 
      transition: all 0.6s ease-in-out; 
 
      /*opacity:0.75;*/ 
 
    } 
 
    /*.fa.spinner-icon{ 
 
     font-size: 13px; 
 
    }*/ 
 
    .spinner-icon.in{ 
 
     transform: rotate(90deg); 
 
    } 
 
    .spinner-icon.out{ 
 
     transform:rotate(0deg); 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
       
 
<ul class="menu-part"> 
 
        <li> 
 
         <ul class="menu-parent">--- MAIN MENU 
 

 
         <li class="sub-menu-parent" id="sub-menu-one" onclick="displaySubMenu(1);rotateIcon(1);"><i class="flip-menu-main-icon fa fa-sun-o"></i><span class="sub-menu-header">Dashboard</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> 
 
          <ul id="sub-menu-one" class="sub-menu"> 
 
           <li> <a href="#">Minimalistic</a> </li> 
 
           <li> <a href="#">Demographical</a> </li> 
 
           <li> <a href="#">Analetical</a>  </li> 
 
           <li> <a href="#"> Simpler </a>  </li> 
 
          </ul> 
 
        </li> 
 

 
         <li class="sub-menu-parent" id="sub-menu-two" onclick="displaySubMenu(2);rotateIcon(2);"><i class="menu-front-icon fa fa-envelope-o"></i><span class="sub-menu-header">Apps</span> <i id="second-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> </li> 
 
          <ul id="sub-menu-one" class="sub-menu"> 
 
           <li> <a href="#">Inbox</a> </li> 
 
           <li> <a href="#">Condact</a> </li> 
 
           <li> <a href="#">Calendar</a> </li> 
 
          </ul> 
 

 
         <li class="sub-menu-parent" id="sub-menu-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="menu-front-icon fa fa-sliders"></i><span class="sub-menu-header">UI Elements</span><i id="third-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> 
 
          <ul id="sub-menu-two" class="sub-menu"> 
 
           <li> <a href="#">Header</a> </li> 
 
           <li> <a href="#">Aside</a> </li> 
 
           <li> <a href="#">Footer</a> </li> 
 
          </ul> 
 
         </li> 
 
         <li class="sub-menu-parent" id="sub-menu-four" onclick="displaySubMenu(4);rotateIcon(4);"><i class="menu-front-icon fa fa-file-code-o"></i><span class="sub-menu-header">Forms</span><i id="fourth-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> 
 
          <ul id="sub-menu-two" class="sub-menu"> 
 
           <li> <a href="#">Header</a> </li> 
 
           <li> <a href="#">Aside</a> </li> 
 
           <li> <a href="#">Footer</a> </li> 
 
          </ul> 
 
         </li> 
 
        </ul>

в приведенной выше коде я пытаюсь реализовать выпадающее меню с два functionalities.when нажмите на меню item,

значок, связанный с каждым пунктом меню, должен вращаться на 90 градусов (он работает правильно).
Подменю, связанное с соответствующим пунктом меню, необходимо отобразить. (Не работает)

я пытался поставить предупредительное сообщение внутри javascript кода, чтобы проверить, есть ли проблема, но это working.i хочет, чтобы исправить эту ошибку, как я могу это исправить?

источник

2016-09-21 Anonymous

Часть проблемы возникает с идентификатором sub-menu-one, sub-menu-two и т. Д. Вы должны использовать эти идентификаторы только один раз. У вас есть внешний список с классом sub-menu-parent с идентификатором, равным id дочерней ul. Удаление идентификатора из родительского объекта позволяет подменю стать видимым.

также, что некоторые из ваших идентификаторов в HTML может иметь прошлое ошибки копирования, например, список ребенка уль родителя 2 имеет идентификатор sub-menu-one

https://jsfiddle.net/qp4g5wuw/1/

источник

2016-09-21 04:18:04 atomSmasher

ok..и понимаю, моя ошибка, спасибо в любом случае ...! –

Я проверил ваш код и Я заметил, что вы только что создали два id с тем же именем. Что вызывает эту проблему. Я изменил ваш код, и он работает нормально. проверить его

Прежде всего я изменил вам идентификатор следующего кода:

<li class="sub-menu-parent" id="sub-menu-one" onclick="displaySubMenu(1);rotateIcon(1);"><i class="flip-menu-main-icon fa fa-sun-o"></i><span class="sub-menu-header">Dashboard</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> 
           <ul id="menu-one" class="sub-menu"> 
            <li> <a href="#">Minimalistic</a> </li> 
            <li> <a href="#">Demographical</a> </li> 
            <li> <a href="#">Analetical</a>  </li> 
            <li> <a href="#"> Simpler </a>  </li> 
           </ul> 
         </li> 

          <li class="sub-menu-parent" id="sub-menu-two" onclick="displaySubMenu(2);rotateIcon(2);"><i class="menu-front-icon fa fa-envelope-o"></i><span class="sub-menu-header">Apps</span> <i id="second-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> </li> 
           <ul id="menu-two" class="sub-menu"> 
            <li> <a href="#">Inbox</a> </li> 
            <li> <a href="#">Condact</a> </li> 
            <li> <a href="#">Calendar</a> </li> 
           </ul> 

          <li class="sub-menu-parent" id="sub-menu-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="menu-front-icon fa fa-sliders"></i><span class="sub-menu-header">UI Elements</span><i id="third-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> 
           <ul id="menu-three" class="sub-menu"> 
            <li> <a href="#">Header</a> </li> 
            <li> <a href="#">Aside</a> </li> 
            <li> <a href="#">Footer</a> </li> 
           </ul> 
          </li> 
          <li class="sub-menu-parent" id="sub-menu-four" onclick="displaySubMenu(4);rotateIcon(4);"><i class="menu-front-icon fa fa-file-code-o"></i><span class="sub-menu-header">Forms</span><i id="fourth-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> 
           <ul id="menu-four" class="sub-menu"> 
            <li> <a href="#">Header</a> </li> 
            <li> <a href="#">Aside</a> </li> 
            <li> <a href="#">Footer</a> </li> 


</ul> 
         </li>

Обратите внимание, я изменил ваш идентификатор суб-меню один к меню один и так далее ...

После этого я изменил некоторые из вашего кода яваскрипта из-за того же ID: P

так что ваш полный код, как это,

JavaScript

function rotateIcon(m) { 
    var key = m; 
if (key === 1) 
    { 

    if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-chevron-right") 
    { 

     document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 

     } 
    else 
     { 
     document.getElementById("first-drop-down-icon").className = "spinner-icon in fa fa-chevron-right"; 
     document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
     document.getElementById("third-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
      document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
     } 


    } 
    else if(key === 2) 
    { 
     if(document.getElementById("second-drop-down-icon").className=="spinner-icon in fa fa-chevron-right") 
    { 

     document.getElementById("second-drop-down-icon").className="spinner-icon out fa fa-chevron-right"; 
     } 
    else 
     { 
     document.getElementById("second-drop-down-icon").className="spinner-icon in fa fa-chevron-right"; 
     document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
      document.getElementById("third-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
      document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
     } 
     } 
else if(key === 3) 
    { 
     if(document.getElementById("third-drop-down-icon").className=="spinner-icon in fa fa-chevron-right") 
    { 

     document.getElementById("third-drop-down-icon").className="spinner-icon out fa fa-chevron-right"; 
     } 
    else 
     { 
     document.getElementById("third-drop-down-icon").className="spinner-icon in fa fa-chevron-right"; 
     document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
      document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
      document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
     } 
     } 
    else if(key === 4) 
    { 
     if(document.getElementById("fourth-drop-down-icon").className=="spinner-icon in fa fa-chevron-right") 
    { 

     document.getElementById("fourth-drop-down-icon").className="spinner-icon out fa fa-chevron-right"; 
     } 
    else 
     { 
     document.getElementById("fourth-drop-down-icon").className="spinner-icon in fa fa-chevron-right"; 
     document.getElementById("first-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
      document.getElementById("third-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
      document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
     } 
     } 
    else{ 
     document.getElementById("third-drop-down-icon").className="spinner-icon out fa fa-chevron-right"; 
     document.getElementById("first-drop-down-icon").className="spinner-icon out fa fa-chevron-right"; 
     document.getElementById("second-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
     document.getElementById("fourth-drop-down-icon").className = "spinner-icon out fa fa-chevron-right"; 
    } 
} 

//----------------------------display sub menu starts here---------------------------------------------------// 

function displaySubMenu(e) { 
    var k = e; 
    if (k === 1) { 
     if(document.getElementById("first-drop-down-icon").className=="spinner-icon in fa fa-chevron-right"){ 
      document.getElementById("sub-menu-one").style.display= "block"; 
      document.getElementById("menu-one").style.display= "none"; 

     } 
     else{ 
     document.getElementById("sub-menu-one").style.display = "block"; 
     document.getElementById("menu-one").style.display= "block"; 
     document.getElementById("sub-menu-two").style.display = ""; 
     document.getElementById("sub-menu-three").style.display = ""; 
     document.getElementById("sub-menu-four").style.display = ""; 
     } 
    } else if (k === 2) { 
     if(document.getElementById("second-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){ 
       document.getElementById("sub-menu-two").style.display= ""; 
       document.getElementById("menu-two").style.display= "none"; 
     } 
     else{ 
     document.getElementById("sub-menu-two").style.display = "block"; 
     document.getElementById("menu-two").style.display= "block"; 
     document.getElementById("sub-menu-one").style.display = ""; 
     document.getElementById("sub-menu-three").style.display = ""; 
     document.getElementById("sub-menu-four").style.display = "";} 
    } else if (k === 3) { 
     if(document.getElementById("third-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){ 
       document.getElementById("sub-menu-three").style.display= ""; 
       document.getElementById("menu-three").style.display= "none"; 
     } 
     else{ 
     document.getElementById("sub-menu-three").style.display = "block"; 
     document.getElementById("menu-three").style.display= "block"; 
     document.getElementById("sub-menu-one").style.display = ""; 
     document.getElementById("sub-menu-two").style.display = ""; 
     document.getElementById("sub-menu-four").style.display = "";} 
    } else if (k === 4) { 
     if(document.getElementById("fourth-drop-down-icon").className == "spinner-icon in fa fa-chevron-right"){ 
       document.getElementById("sub-menu-four").style.display= ""; 
       document.getElementById("menu-four").style.display= "none"; 
     } 
     else{ 
     document.getElementById("sub-menu-four").style.display = "block"; 
     document.getElementById("menu-four").style.display= "block"; 
     document.getElementById("sub-menu-one").style.display = ""; 
     document.getElementById("sub-menu-three").style.display = ""; 
     document.getElementById("sub-menu-two").style.display = "";} 
    } else { 
     document.getElementById("sub-menu-one").style.display = ""; 
     document.getElementById("sub-menu-two").style.display = ""; 
     document.getElementById("sub-menu-three").style.display = ""; 
     document.getElementById("sub-menu-four").style.display = ""; 
    } 
}

HTML Форма

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 

<ul class="menu-part"> 
        <li> 
         <ul class="menu-parent">--- MAIN MENU 

         <li class="sub-menu-parent" id="sub-menu-one" onclick="displaySubMenu(1);rotateIcon(1);"><i class="flip-menu-main-icon fa fa-sun-o"></i><span class="sub-menu-header">Dashboard</span> <i id="first-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> 
          <ul id="menu-one" class="sub-menu"> 
           <li> <a href="#">Minimalistic</a> </li> 
           <li> <a href="#">Demographical</a> </li> 
           <li> <a href="#">Analetical</a>  </li> 
           <li> <a href="#"> Simpler </a>  </li> 
          </ul> 
        </li> 

         <li class="sub-menu-parent" id="sub-menu-two" onclick="displaySubMenu(2);rotateIcon(2);"><i class="menu-front-icon fa fa-envelope-o"></i><span class="sub-menu-header">Apps</span> <i id="second-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> </li> 
          <ul id="menu-two" class="sub-menu"> 
           <li> <a href="#">Inbox</a> </li> 
           <li> <a href="#">Condact</a> </li> 
           <li> <a href="#">Calendar</a> </li> 
          </ul> 

         <li class="sub-menu-parent" id="sub-menu-three" onclick="displaySubMenu(3);rotateIcon(3);"><i class="menu-front-icon fa fa-sliders"></i><span class="sub-menu-header">UI Elements</span><i id="third-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> 
          <ul id="menu-three" class="sub-menu"> 
           <li> <a href="#">Header</a> </li> 
           <li> <a href="#">Aside</a> </li> 
           <li> <a href="#">Footer</a> </li> 
          </ul> 
         </li> 
         <li class="sub-menu-parent" id="sub-menu-four" onclick="displaySubMenu(4);rotateIcon(4);"><i class="menu-front-icon fa fa-file-code-o"></i><span class="sub-menu-header">Forms</span><i id="fourth-drop-down-icon" class="spinner-icon fa fa-chevron-right"></i> 
          <ul id="menu-four" class="sub-menu"> 
           <li> <a href="#">Header</a> </li> 
           <li> <a href="#">Aside</a> </li> 
           <li> <a href="#">Footer</a> </li> 
          </ul> 
         </li> 
        </ul>

Надеется, что вы понимаете его. Я спешу: P

источник

2016-09-21 04:21:02 Sunny

спасибо любым способом ..! –

как отобразить элементы подменят в этом раскрывающегося меню

ответ

Смежные вопросы