在li之后显示外部div

Question

我有像

这样的HTML

<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>

当我点击第一个加号图像时，第一个div应该显示在1下面。当我点击加图像附近2第二个图像应该显示在下面2。我试了很多方法，但运气不好。请提供解决方案。

Answer 1

Try

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

演示:小提琴

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();
});

编辑:这里有一个小提琴给你(http://jsfiddle.net/bp9Mf/)