HTML anh Javascript ADD

Question

Ich habe den folgenden Code

sTAT **javascript** 

var acc = document.getElementsByClassName("item-wrapper"); 
var i; 
for (i = 0; i < acc.length; i++) { 
acc[i].onclick = function(){ 
this.classList.toggle("selected"); 
this.nextElementSibling.classList.toggle("show"); 
} 
} 
}); 

css

.accordion-menu{ 
    list-style: none;margin: 0;padding: 0; 
} 
.accordion-menu a { 
    text-decoration: none; 
    background: none; 
    font-family: arial; 
} 

.accordion-menu a:hover, 
.accordion-menu a:visited, 
.accordion-menu a:active, 
.accordion-menu a:focus{ 
    background: none; 
} 

.accordion-menu li { 
    cursor: pointer; 
    background: none ; 
} 
ul.accordion-menu>li>.item-wrapper,li.item-wrapper { 
    background: url("../images/bullet-1.png") no-repeat scroll 12px 14px , #242729 repeat-x 0 0; 
    height: 45px; 
    line-height: 44px; 
    padding: 0px 35px; 
    margin: 0; 
     border-bottom: 1px solid #181818; 
    border-top: 1px solid #454545; 
    position: relative; 
} 
ul.accordion-menu>li>.item-wrapper:after { 
    content: '\02795'; /* Unicode character for "plus" sign (+) */ 
    font-size: 13px; 
    color: #777; 
    float: right; 
    margin-left: 5px; 
} 
ul.accordion-menu>li>.item-wrapper.selected:after{ 
    content: "\2796"; /* Unicode character for "minus" sign (-) */ 
} 
/*Hover Level1*/ 
ul.accordion-menu> li >.item-wrapper:hover,li.item-wrapper:hover{ 
    background: url("../images/bullet-1.png") no-repeat scroll 12px -45px , url(../images/vertical.png) repeat-x 0 0; 

} 
ul.accordion-menu> li >.item-wrapper:before,li.item-wrapper:before{ 
    content: ""; 
    z-index: 10; 
    position: absolute; 
    left: 0; 
    top:0; 
    width:5px; 
    height: 100%; 
    background: #636363; 
} 
ul.accordion-menu> li >.item-wrapper:hover:before, 
ul.accordion-menu> li.current >.item-wrapper:before,li.item-wrapper:hover:before{ 
    background-color: #FF8400; 
} 

.accordion-menu>li>.item-wrapper a,li.item-wrapper a { 
    font-size: 133.3%; 

} 

.accordion-menu li .ul-wrapper { 
    display: none; 
} 
div.ul-wrapper ul{ 
    list-style: none; 
    padding: 0; 
} 
div.ul-wrapper > ul > li{ 
    border-bottom: 1px solid #9C8383; 
    background: url(../images/li.png) no-repeat 10px 12px; 
    background-color: #1F1C1C; 
    line-height: 30px; 
    height: 30px; 
    padding-left: 26px; 
} 
div.ul-wrapper ul ul > li { 
    background: url(../images/bullet2.png) no-repeat 23px 12px; 
} 

/* Hover level2*/ 
div.ul-wrapper > ul > li:hover, 
div.ul-wrapper > ul > li.current{ 
    background: url(../images/li-hover.png) no-repeat 10px 12px;`enter code here` 
    background-color: #2b2b2b; 
} 
div.ul-wrapper > ul > li:hover div.item-wrapper{ 
    background: none;border-bottom: none;} 
div.ul-wrapper > ul ul > li:hover{ 
    background-color: #262525; 
    background: url(../images/bullet2-hover.png) no-repeat 23px 12px; 
} 
.accordion-menu li ul ul .item-wrapper { 
    padding-left: 24px; 
} 
.accordion-menu li ul li.current .item-wrapper, 
.accordion-menu li ul li.open .item-wrapper{ 
    background: none; 
    border: none; 
} 

.accordion-menu li:last-child,.accordion-menu>li.last { 
    border-bottom: none; 
} 
.accordion-menu{ 
    text-align: left; 
} 

.accordion-menu a{ 
    float: left; 
} 

HTML

<div class="module_menu"> 
    <div class="module-content clearfix"> 
     <ul class="accordion-menu" id="demo-menu"> 
      <li class="item-wrapper"> 
       <a href="/category1">Category 1</a> 
      </li> 
      <li> 
       <div class="item-wrapper"> 
        <a href="/category2">Category 2</a> 
       </div> 
       <div class="ul-wrapper"> 
        <ul> 
         <li> 
          <a href="/category2/2013-01-16-23-09-22">Sub category 1</a> 
         </li> 
         <li> 
          <a href="/category2/2013-01-16-23-09-23">Sub category 2</a> 
         </li> 
        </ul> 
       </div> 
      </li> 
      <li> 
       <div class="item-wrapper"> 
         <a href="/category3">Category 3</a> 
       </div> 
       <div class="ul-wrapper"> 
        <ul> 
         <li> 
          <a href="/category3/2013-01-16-23-09-22">Sub category 1</a> 
         </li> 
         <li> 
          <a href="/category3/2013-01-16-23-09-23">Sub category 2</a> 
         </li> 
        </ul> 
       </div> 
      </li> 
      <li class="item-wrapper"> 
       <a href="/category4">Category 4</a> 
      </li> 
     </ul> 
    </div> 
</div> 

fg

jetzt mag ich Bedingungen hinzufügen, dass der Element-Wrapper div Klicken auf die Karte zu zeigen, das Interesse ist mehr dahinter ul-Wrapper-div-Tag in JavaScript sein muss, dann wie? Danke

Answer 1

Es ist ziemlich unklar, was Sie genau fragen, aber nach dem Betrachten Ihres Codes, ich denke, dass ich eine Lösung für Sie haben kann.

Das Hinzufügen der Klasse "show" zu Ihrem ul-Wrapper sagt dem DOM nicht, dass dieses Element angezeigt werden soll. Dazu müssen Sie das Attribut "display" verwenden.

https://jsfiddle.net/65x06x7m/

var acc = document.getElementsByClassName("item-wrapper"); 
var i; 
for (i = 0; i < acc.length; i++) { 
    acc[i].onclick = function(){ 
     this.classList.toggle("selected"); 
     this.nextElementSibling.style.display = 'block'; 
     } 
} 

Referenz:

Show/hide 'div' using JavaScript