0

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

4

2 回答 2

1

所以，让我们稍微重构一下……

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

于 2013-05-07T17:21:35.817 回答
1

尝试

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

演示：小提琴

于 2013-05-07T17:15:49.047 回答