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应显示在One下面。当我点击两个附近的加号图像时，第二个图像应显示在两个下面。我尝试了很多方法，但没有运气。请提供解决方案。提前谢谢。

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

li后显示外部div

2 个答案: