Question

单击按钮时，我试图在图像顶部显示一些覆盖面板，其中包含一些附加信息。 HTML如下所示，可以有无限数量的这些部分。

<div class="half">

    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/BiyaRiver.JPG" alt="">                            

    <div class="information"">

        <p>Left Image Overlay Information</p>

    </div> <!-- .information -->

    <div class="info-icon"></div><!-- .info-icon -->            

</div> <!-- .half -->

CSS中的'.information'覆盖设置为display：none，最初我有一些JQuery代码如下：

$(".info-icon").click(function () {

    if( $(".information").is(":hidden") ) {

        $(this).css("background","url(https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-128.png");

        $(".information").css("display","block");   

    } else {

        $(this).css("background","url(https://cdn2.iconfinder.com/data/icons/app-types-in-grey/128/info_512pxGREY.png");

        $(".information").css("display","none");

    }

});

然而，这会影响所有面板，而不是我追求的。

所以我已经得到了下面的代码，它更接近我想要的但它没有按预期工作。您可以显示每个部分的面板，但不会关闭它，直到您到达最后一部分，然后它会按预期显示和显示。

$(".info-icon").click(function () {

    if( $(".information").is(":hidden") ) {

        $(this).css("background","url(http://butterscotch.wecreatedev.co.uk/wp-content/themes/butterscotch-child/img/close.svg");
        $(this).closest('.half').find('.information').css("display","block");

    } else {

        $(this).css("background","url(http://butterscotch.wecreatedev.co.uk/wp-content/themes/butterscotch-child/img/information.svg");
        $(this).closest('.half').find('.information').css("display","none");    

    }

});

已经创建了JS Fiddle来演示这个问题：

https://jsfiddle.net/g83Lbodu/4/

非常感谢所有的时间和帮助。

Answer 1

我建议简化这一点并让CSS处理样式更改：

JS Fiddle

JQuery的

$(".info-icon").click(function() {
  $('.half').has(this).toggleClass('overlay-visible');
});

CSS

.overlay-visible .information { 
  display: block;
}
.overlay-visible .info-icon {
  background: url('http://butterscotch.wecreatedev.co.uk/wp-content/themes/butterscotch-child/img/close.svg') 100% 100%;
}

Answer 2

您还需要更新if条件以满足最接近的.information div。此外，您不需要直接设置CSS，您应该可以使用.hide()和.show()

因此，您的新代码应如下所示：

$(".info-icon").click(function () {

    if( $(this).closest('.half').find('.information').is(":hidden") ) {

        $(this).css("background","url(http://butterscotch.wecreatedev.co.uk/wp-content/themes/butterscotch-child/img/close.svg");
        $(this).closest('.half').find('.information').show();

    } else {

        $(this).css("background","url(http://butterscotch.wecreatedev.co.uk/wp-content/themes/butterscotch-child/img/information.svg");
        $(this).closest('.half').find('.information').hide();    

    }

});

更新了小提琴：https://jsfiddle.net/g83Lbodu/7/

使用JQuery显示/隐藏信息面板

2 个答案: