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 の下に表示されます。Two の近くにあるプラスの画像をクリックすると、Two の下に 2 番目の画像が表示されます。私は多くの方法を試しましたが、うまくいきませんでした。解決策を提供してください。前もって感謝します。

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 に答える