jquery - 在同一个 li 中加载不同的内容？

Question

我想知道如果我有带有图像和标题的 li 列表，当我单击图像中的一个时，它会在图像顶部显示更多文本（隐藏图像）并且当您单击文本时，最好的方法是什么它将再次显示图像。

如果我有这个开始：

<ul>
<li>
<img src="image1.jpg"/><br>
Headline no1
<div> this is the text I want to show</div>
</li>

下一个……

那么什么是最好的呢？用 jquery 或其他建议切换 div？

感谢您的输入。

Answer 1

为此，我的朋友，您需要 javascript (JS)、使用 jquery、纯 JS 或任何您想要的。但是您需要加载 DOM 中的两个对象，一个可见，另一个不可见。并用 JS 更改对象样式中的显示属性。

纯 JS 中的示例，带有 div 图像和 div 文本：

<script>
  function showHide(idShow, idHide) {
     document.getElementById(idShow).style.display = "";
     document.getElementById(idhide).style.display = "none";
  }
</script>

<div id="image" onclick="showHide("text", "image");">
    <img>....</img>
</div>
<div id="text" style="display: none;" onclick="showHide("image", "text");">
    <p> some text</p>
</div>

Answer 2

我想，这就是你要找的：

<ul>
<li>
    <img class="switch" src="image1.jpg"/>
    <div class="hide switch" > this is the text        
I want to show</div>
    <h1>Headline no1</h1>
</li>
<li>
    <img class="switch" src="image1.jpg"/>    <div class="switch hide"> this is the text I want to show 2</div>
    <h2>Headline no2</h2>
</li>

</ul>

使用这个 jQuery 代码：

$(document).ready( function(){

    $('.switch').click( function( ev ){
        var self = ev.currentTarget;
        var type = self.localName;
        var other;

        other = $(self).siblings( (type == 'div') ? 'img' : 'div' );

        $(self).addClass( 'hide' );
        other.removeClass( 'hide' );
    } );

} );

这是一个小提琴：http: //jsfiddle.net/Qv862/1/

需要一些原因的样式:)

如果你把你的img放在一个div中，可以写得更简单：http: //jsfiddle.net/Qv862/2/