Question

我正在尝试使用标题制作图像，点击它时，应使用jquery显示标题。
我有两个问题第一个问题是，即使我使用jquery来隐藏它，第二个标题也是可见的第二个问题是，我想只显示图像的标题，你是“点击”，而不是所有字幕你可以找到我的小提琴 here
我希望你对我的问题有任何想法或建议。谢谢！的 HTML

<div id="galerija_album">
        <div id="galerija_slika"><a href="#"><img src="http://web.enavu.com/demos/cssCaption/wolf.jpg"/ ></a></div>
        <span>Hello<li id="galerija_informacije_show"><img src="slike/arrow_down.png"/ ></li><br>
          <li id="galerija_informacije">Some text</li>
        </span>
       </div>
            <div id="galerija_album">
        <div id="galerija_slika"><a href="#"><img src="http://web.enavu.com/demos/cssCaption/wolf.jpg"/ ></a></div>
        <span>Hello<li id="galerija_informacije_show"><img src="slike/arrow_down.png"/ ></li><br>
          <li id="galerija_informacije">Some text</li>
        </span>
       </div>

CSS

#galerija_album{
    margin:20px;
    width:195px;
    height:150px;
    padding:7px;
    display: inline-block;
    margin-top:15px;
    float:left;
    position: relative;
    background:white;
    overflow: hidden;
}
#galerija_album img{
    width: 100%;
    height:100%;

}
#galerija_slika{


}
#galerija_album span{
    position:absolute; 
    margin:5px;
    bottom:2px; 
    left:2px;
    width:175px;
    background-color:black;
    font-family: 'verdana';
    font-size:15px;
    color:lightblue;
    opacity:0.7; 
    filter:alpha(opacity=70); 
    padding:10px;

}
#galerija_informacije_show{
    list-style: none;
    display:inline-block;
    float:right;
    width:20px;
    height:20px;
}
#galerija_informacije_show:hover{
    cursor: pointer;
}
#galerija_informacije{
    list-style: none;

}

JQUERY

$(document).ready(function(){
    $("#galerija_informacije").hide();
    $("#galerija_informacije_show").click(function(){
        $("#galerija_informacije").slideToggle("fast");

    });

});

Answer 1

提供JSFiddle，我已经用

所需的更改更新了它

仅在单击图像时显示标题
点击下拉图片时展开更多信息

我的更新位于http://jsfiddle.net/S279z/2/

我提供了隐藏所有字幕的功能。然后是点击事件，第一个应用于狗的图像，点击时将显示标题。第二个单击事件位于下拉列表中，这将扩展div类galerija_informacije中的更多信息。

<强>的JavaScript

$(document).ready(function () {
    var hideAll = function() {
        $("span.galerija_informacije_show").hide();
        $(".galerija_informacije").hide();
    };
    hideAll();

    $('.galerija_album').on('click', function() {
        hideAll();
        $("span.galerija_informacije_show", this).slideToggle("fast");
    });
    $('.galerija_informacije_show').on('click', function() {
        event.stopPropagation();
    });
    $('.galerija_informacije_show img').on('click', function() {
        console.log(this.parentNode);
        $(".galerija_informacije", this.parentNode).slideToggle("fast");
        event.stopPropagation();
    });

});

我已经更新了HTML以获取ID，并且还删除了列表项，而是使用我需要它们的div

<强> HTML

<div id="galerija_album_0" class="galerija_album">
    <div id="galerija_slika"><a href="#"><img src="http://web.enavu.com/demos/cssCaption/wolf.jpg"/ ></a>

     <span id="galerija_informacije_show_0" class="galerija_informacije_show">Hello<img src="http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif"/ ><br>
          <div id="galerija_informacije_0" class="galerija_informacije">Some text</div>
        </span>
         </div>

</div>
<div id="galerija_album_1" class="galerija_album">
    <div id="galerija_slika"><a href="#"><img src="http://web.enavu.com/demos/cssCaption/wolf.jpg"/></a>

    <span id="galerija_informacije_show_1" class="galerija_informacije_show">Hello<img src="http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif"/ ><br>
        <div id="galerija_informacije_1" class="galerija_informacije">Some text</div>
        </span>
        </div> 

</div>

对于CSS，有一些更改以确保它看起来仍然像您提供的示例

<强> CSS

.galerija_album{
    margin:20px;
    width:195px;
    height:150px;
    padding:7px;
    display: inline-block;
    margin-top:15px;
    float:left;
    position: relative;
    background:white;
    overflow: hidden;
}
.galerija_album span{
    position:absolute; 
    margin:5px;
    bottom:2px; 
    left:2px;
    width:175px;
    background-color:black;
    font-family: 'verdana';
    font-size:15px;
    color:lightblue;
    opacity:0.7; 
    filter:alpha(opacity=70); 
    padding:10px;

}
.galerija_album div a img{
    width: 100%;

}
.galerija_informacije_show img{
    float: right;
    cursor: pointer;

}
.galerija_informacije_show{
    cursor: auto;
}

显示图像的标题

1 个答案: