Html5 accordion menu and html5 accordion menu
As the project requires, now you need to create an accordion menu, so you just need to adjust it, using less. js javascript jquery.
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> </title>
<Style type = "text/less">
. List {
List-style-image: url (../images/shang.png );
Background: # E0E0E0;
Line-height: 2em
}
. List1 {
List-style-type: none;
Background: # E0E0E0;
Line-height: 2em
}
. LiBox {
. List1;
. Listbox {
. List;
. Div1 {
Margin-left: 20px
}
}
}
</Style>
</Head>
<Body>
<Div>
<Ul>
<Li id = "liBox" class = "liBox">
<Ul>
<Li id = "listbox" class = "listbox" onclick = "toggleClick (this)"> test </li>
<Div id = "box" class = "box" hidden>
<Div onclick = "test (this)"> this is a test 1 </div>
<Div onclick = "test (this)"> this Is A test 2 </div>
<Div onclick = "test (this)"> this Is A test 3 </div>
<Div onclick = "test (this)"> this is a test 4 </div>
<Div onclick = "test (this)"> this Is A test 5 </div>
<Div onclick = "test (this)"> this Is A test 6 </div>
</Div>
<Div hidden>
<Li id = "listboxC" class = "listbox" onclick = "toggleClick (this)"> testing 101 </li>
<Div hidden>
<Div onclick = "test (this)"> this is a test 1010 </div>
<Div onclick = "test (this)"> this is a test 1011 </div>
<Div onclick = "test (this)"> this is a test 1012 </div>
<Div onclick = "test (this)"> this is a test 1013 </div>
<Div onclick = "test (this)"> this is a test 1014 </div>
</Div>
</Div>
</Ul>
</Li>
<Li id = "liBox1" class = "liBox">
<Ul>
<Li id = "listbox1" class = "listbox" onclick = "toggleClick (this)"> Test 1 </li>
<Div id = "box" class = "box" hidden>
<Div onclick = "test (this)"> this Is A test 7 </div>
<Div onclick = "test (this)"> this is a test 8 </div>
<Div onclick = "test (this)"> this is a test 9 </div>
<Div onclick = "test (this)"> this is a test 10 </div>
<Div onclick = "test (this)"> this Is A test 11 </div>
<Div onclick = "test (this)"> this is a test 12 </div>
</Div>
</Ul>
</Li>
<Li id = "liBox2" class = "liBox">
<Ul>
<Li id = "listbox2" class = "listbox" onclick = "toggleClick (this)"> Test 2 </li>
<Div id = "box" class = "box" hidden>
<Div onclick = "test (this)"> this is a test 13 </div>
<Div onclick = "test (this)"> this is a test 14 </div>
<Div onclick = "test (this)"> this is a test 15 </div>
<Div onclick = "test (this)"> this is a test 16 </div>
<Div onclick = "test (this)"> this is a test 17 </div>
<Div onclick = "test (this)"> this is a test 18 </div>
</Div>
</Ul>
</Li>
<Li id = "liBox3" class = "liBox">
<Ul>
<Li id = "listbox3" class = "listbox" onclick = "toggleClick (this)"> Test 3 </li>
<Div id = "box" class = "box" hidden>
<Div onclick = "test (this)"> this is a test 19 </div>
<Div onclick = "test (this)"> this is a test 20 </div>
<Div onclick = "test (this)"> this is a test 21 </div>
<Div onclick = "test (this)"> this Is A test 22 </div>
<Div onclick = "test (this)"> this Is A test 23 </div>
<Div onclick = "test (this)"> this is a test 24 </div>
</Div>
</Ul>
</Li>
</Ul>
</Body>
</Html>
<Script language = "JavaScript" type = "text/JavaScript" src = "../bootstrap/js/less. min. js"> </script>
<Script language = "JavaScript" type = "text/JavaScript" src = "../bootstrap/js/jquery. min. js"> </script>
<Script type = "text/javascript">
Function toggleClick (evl ){
$ ("#" + Evl. id). nextAll (). toggle ();
If ($ ("#" + evl. id). nextAll (). is (": hidden ")){
Document. getElementById (evl. id). style. listStyleImage = "url (../images/shang.png )";
} Else {
If ($ (evl). attr ("class") = "listbox "){
Document. getElementById (evl. id). style. listStyleImage = "url (../images/xia.png )";
}
}
}
Function test (evl ){
Alert (evl. innerText );
}
</Script>
I didn't want to write it at first, but I thought about it. There may be some problems in code simplification. Because the data is dynamically loaded in my project, it is not corrected. Please include.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
