显示外层div李

Question

后，我有一个像

<div id="abc"> 
    <ul> 
    <li class="first">One<img src="images/plus.png" /></li> 
    <li class="first">Two<img src="images/plus.png" /></li> 
    <li class="first">Three<img src="images/plus.png" /></li> 
    <li class="first">Four<img src="images/plus.png" /></li> 
    </ul> 
    <div class="content"> 
    <h3>Title1</h3> 
    <p>Title1 Description</p> 
    </div> 
    <div class="content"> 
    <h3>Title2</h3> 
    <p>Title2 Description</p> 
    </div> 
    <div class="content"> 
    <h3>Title3</h3> 
    <p>Title3 Description</p> 
    </div> 
    <div class="content"> 
    <h3>Title4</h3> 
    <p>Title4 Description</p> 
    </div> 
</div> 

的HTML当我点击第一个div应显示下方的一个第一正图像。当我点击两张附近的图片时，第二张图片应该显示在下方。我尝试了很多方法，但没有运气。请提供解决方案。提前致谢。

Answer 1

尝试

$('#abc > ul > li img').click(function(){ 
    var li = $(this).closest('li'); 
    $('#abc > div.content').eq(li.index()).toggle() 
}) 

演示：Fiddle

Answer 2

那么，让我们重组这个有点......

<div id="abc"> 
    <ul> 
     <li class="first"> 
      <a href="#">One<img src="images/plus.png" /></a> 
      <div class="content"> 
       <h3>Title1</h3> 
       <p>Title1 Description</p> 
      </div> 
     </li> 
     <li class="first"> 
      <a href="#">Two<img src="images/plus.png" /></a> 
      <div class="content"> 
       <h3>Title2</h3> 
       <p>Title2 Description</p> 
      </div> 
     </li> 
     <li class="first"> 
      <a href="#">Three<img src="images/plus.png" /></a> 
      <div class="content"> 
       <h3>Title3</h3> 
       <p>Title3 Description</p> 
      </div> 
     </li> 
     <li class="first"> 
      <a href="#">Four<img src="images/plus.png" /></a> 
      <div class="content"> 
       <h3>Title4</h3> 
       <p>Title4 Description</p> 
      </div> 
     </li> 
    </ul> 
</div> 

现在jQuery的

// Assuming you don't have .content already hidden 
// in your CSS - remove the next line if you do 
$('.content').hide(); 

// Added <a> tags wrapping the link parts 
$('#abc li > a').on('click', function(event) { 
    event.preventDefault(); 
    jQuery(this).parent('li').children('.content').toggle(); 
}); 

编辑：这是一个fiddle for you（http://jsfiddle.net/bp9Mf/）