Work in contact with a topic of the structure is more special, the code is as follows:
| The code is as follows |
Copy Code |
| <div class= "Test" >
<ul class= "List" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class= "part" >
<div>1-1</div>
<div style= "Display:none;" >2</div>
<div style= "Display:none;" >3</div>
<div style= "Display:none;" >4</div>
<div style= "Display:none;" >5</div>
</div>
</div>
<div class= "Test" >
<ul class= "List" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class= "part" >
<div>2-1</div>
<div style= "Display:none;" >2-2</div>
<div style= "Display:none;" >2-3</div>
<div style= "Display:none;" >2-4</div>
<div style= "Display:none;" >2-5</div>
</div>
</div> |
Ask to click on the Li tag under each. List to control the display of the div layer of the. Part below the. Part, without affecting the display of the other. List-related layers on the page!
Just beginning to feel that there is no technical difficulty in dealing with this, but the hands of the time or encountered a little problem, record the implementation code
| The code is as follows |
Copy Code |
|
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<title>Examples</title>
<meta name= "description" content= "" >
<meta name= "keywords" content= "" >
<link href= "" rel= "stylesheet" >
<style>
*{margin:0;padding:0;}
. test{padding:20px;}
. Test Ul{overflow:hidden;}
. Test ul li{width:50px;height:30px;margin-right:10px; border-bottom:1px red Solid;float:left; cursor:pointer;}
</style>
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" ></script>
<body>
<div class= "Test" >
<ul class= "List" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class= "part" >
<div>1-1</div>
<div style= "Display:none;" >2</div>
<div style= "Display:none;" >3</div>
<div style= "Display:none;" >4</div>
<div style= "Display:none;" >5</div>
</div>
</div>
<div class= "Test" >
<ul class= "List" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class= "part" >
<div>2-1</div>
<div style= "Display:none;" >2-2</div>
<div style= "Display:none;" >2-3</div>
<div style= "Display:none;" >2-4</div>
<div style= "Display:none;" >2-5</div>
</div>
</div>
<script>
var index,
Parent
$ (". List >li"). each (function (i, EL) {/*) The LI index under the list will accumulate, that is, I value: 0<=i<=9 * *
$ (this). Click (Function (event) {
parent=$ (This). Parents (". Test");
index=$ (". List >li", parent). Index ($ (this))//Get the click item in the corresponding parent element. Test. Part, not the I value in each ()
Console.log (index);
Parent.children ('. Part '). Find ("div"). EQ (index)-show (). siblings (). Hide ();
});
});
</script>
</body>
|
