jquery - HTML anh Javascript ADD -

-

i have following code

stat **javascript** 
var acc = document.getelementsbyclassname("item-wrapper"); var i; (i = 0; < 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 {     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 "plus" sign (+) */     font-size: 13px;     color: #777;     float: right;     margin-left: 5px; } ul.accordion-menu>li>.item-wrapper.selected:after{     content: "\2796"; /* unicode character "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 {     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

now want add conditions that, clicking item-wrapper div show card, interest more behind must ul-wrapper div tag in javascript , how? thanks

it's pretty unclear you're asking after looking @ code, think may have solution you.

adding class "show" ul-wrapper doesn't tell dom show element. that, need use "display" attribute.

https://jsfiddle.net/65x06x7m/

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

reference: show/hide 'div' using javascript


Comments

Post a Comment

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

-
i trying fetch records database , having above error this classs appropriate getters , setters public class user { private int id; private string username; private string password; private string email; i have create database , inserted data below configuration <bean id="datasource" class="org.apache.commons.dbcp2.basicdatasource" destroy-method="close"> <property name="driverclassname" value="com.mysql.jdbc.driver"/> <property name="url" value="jdbc:mysql://localhost:3306/usersdb"/> <property name="username" value="root"/> <property name="password" value=""/> </bean> this complete stacktrace severe: servlet.service() servlet [appservlet] in context path [/spring] threw exception [request processing failed; nested exception org.hibernate.exception.sqlgrammarexception: not ...
Read more

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

-
Image
i have postgresql db number of tables. if query: select column_name information_schema.columns table_name="my_table"; i list of columns returned properly. however, when query: select * "my_table"; i error: (programmingerror) relation "my_table" not exist 'select *\n "my_table"\n' {} any thoughts on why can columns, can't query table? goal able query table. you have include schema if isnt public one select * <schema>."my_table" or can change default schema show search_path; set search_path my_schema; check table schema here select * information_schema.columns for example if table on default schema public both works ok select * parroquias_region select * public.parroquias_region but sectors need specify schema select * map_update.sectores_point
Read more

asp.net mvc - breakpoint on javascript in CSHTML? -

-
i have .cshtml file has javascript tag. within script tag have few lines of javascript. first line of javascript refers property in @viewbag. other javascript lines plain script without mvc related references. observation: can place breakpoints (visual studio 2015) on each of these javascript lines. however, breakpoints has white dot in center of breakpoint symbol (red circle) except line @viewbag reference (this particular line not have white dot in center). it seems breakpoint without white dot hit during run-time. question: can explain going on here? white dot mean? why plain red breakpoint line line hitting breakpoint? the visual studio debugger expecting debug actual server-side code within .cshtml file opposed client-side javascript within it. iirc, visual studio allow debug javascript code expected in internet explorer (and possibly edge), other browsers want use either third-party tool or developer tools (f12) within browser. an easy approach take advant...
Read more