jQuery，如果div具有“ in”类，则更改另一个div的背景色

debugcn 发表于 Dev

亚历克斯·扎希尔（Alex Zahir）

我想打一个div类的背景.panel-heading为蓝色，如果.panel-collapse在div里面.panel有一个类的in。我正在使用Bootstrap手风琴。

这是我的HTML：

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                Lipsum set dolor
                <span class="pull-right glyphicon glyphicon-minus"></span>
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
        </div>
    </div>
</div><!-- end panel -->

我尝试了类似这样的简单操作，但无法正常工作：

if ($('.panel-collapse').hasClass('in')) {
    $(this).closest('.panel-heading').css("background", "blue");
}
else {
    $(this).closest('.panel-heading').css("background", "red");
}

易卜拉欣汗

.panel-heading是的同胞.panel-collapse。尝试像下面的使用siblings()方法。

$('.in').siblings('.panel-heading').css("background", "blue");

$('.collapse').on('shown.bs.collapse', function () {
    var panelHeading = $(this).siblings('.panel-heading');
    panelHeading.find(".glyphicon-plus").toggleClass("glyphicon-minus glyphicon-plus");
    panelHeading.css("background", "blue");
}).on('hidden.bs.collapse', function () {
    var panelHeading = $(this).siblings('.panel-heading');
    panelHeading.find(".glyphicon-minus").toggleClass("glyphicon-minus glyphicon-plus");
    panelHeading.css("background", "red");
});

更新场

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。