The solution of JS left multilevel menu dynamic in ASP

Source: Internet
Author: User

I wanted to get a JS menu last night, and I didn't get it out all night. Later, Baidu, a little Khan ~ ~ ~

The effect of the implementation is very simple, is to click on the display, and then click on the hidden, but is more than a few levels of the problem. OK, now to say my idea of design, start with the first level, add the following code:

<div><a onclick= "News_pro (' 1.1 ')" >1</a></div>
<div id= "1.1" >
<div> <a onclick= "News_pro (' 1.1.1 ')" >1.1</a></div>
</div>

This appears two times category, point parent display (hidden) child menu, JS code is a word:

function News_pro (o)
{
var Obj=document.getelementbyid (o)
obj.style.display== ""? Obj.style.display= "None": obj.style.display= "";
}

Isn't it a little too easy, yes, it's that simple, but it's not over yet, we're going to go ahead and add levels three and four submenus:

<div><a onclick= "News_pro (' 1.1 ')" >1</a></div>
<div id= "1.1" >
<div> <a onclick= "News_pro (' 1.1.1 ')" >1.1</a></div>
<div id= "1.1.1" >
<div> <a onclick= "News_pro (' 1.1.1.1 ')" >1.1.1</a></div>
<div id= "1.1.1.1" >
<div> 1.1.1.1</div>
<div> 1.1.1.2</div>
</div>
<div> 1.1.2</div>
</div>
<div> 1.2</div>
<div> 1.3</div>
</div>
JS code or only that line, so easy, but really so finished it? The answer is nonono!. When you point to one of the level, the page jumps, this is what we want, but the left menu has become the original look, and did not save the state I just clicked, that how to do? Because colleagues are going to use the ASP, as if there is no view state this dongdong, that use session to save it? It seems to work. But if you click a bit faster, you will find that the menu sometimes a few times will be different, the basic reaction or session lost, and finally I found my name is very interesting, Level 1, two is 1.1 three level is 1.1.1, four is 1.1.1.1, think of what? Thought of the database design multi-level categories of query it!? It seems that the category in Discuz is designed like this. It query also quickly, then I also give it a quick, brainwave, so happy.

The code is as follows, using the URL to pass the value of the way:

<div><a onclick= "News_pro (' 1.1 ')" href= "id=1.1" >1</A></DIV>
<div id= "1.1" <%I F InStr (Request.QueryString ("id"), "1.1") =0 Then Response.Write style= ' Display:none; ' %>>
<div> <a onclick= "News_pro (' 1.1.1 ')" href= "id=1.1.1" >1.1</A></DIV>
< Div id= "1.1.1" style= "Display:none" <%if InStr (Request.QueryString ("id"), "1.1.1") =0 Then Response.Write style= ' Display:none; ' %>>
<div> <a onclick= "News_pro (' 1.1.1.1 ')" href= "id=1.1.1.1" >1.1.1</a></div>
<div id= "1.1.1.1" <%if InStr (Request.QueryString ("id"), "1.1.1.1" =0 Then ' Response.Write ' Display: none; ' %>>
<div> 1.1.1.1</div>
<div> 1.1.1.2</div>
</div>
<div> 1. 1.2</div>
</div>
<div> 1.2</div>
<div> 1.3</div>
</div>
<div><a >2</a></div>
<div><a >3</a></Div>

I believe this code does not manage ASP or asp.net are not very different, in fact, with pure JS can be done, but since it is used in the ASP, why do you want to write more JS? Well, the function has been realized. Everyone is OK, if you have a different method, welcome to post it all together to share. From the study of progress ...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.