gpt4 book ai didi

jquery - Bootstrap 2.3 嵌套 Accordion 图标更改也发生在父级上

转载 作者:太空宇宙 更新时间:2023-11-04 16:11:29 24 4
gpt4 key购买 nike

我正在使用 bootstrap 2.3 嵌套 Accordion 。还编写了 JQuery 来更改打开和关闭时的图标。但问题是,当嵌套 Accordion 打开时,父级 Accordion 的图标也会发生变化。

谁能帮我解决这个问题。

Sample Fiddle

$('.accordion-group').on('show', function() {
$(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up');
});
$('.accordion-group').on('hide', function() {
$(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down');
});
.arrow-down {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAAHwAAAB8ARUP7eQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAACISURBVChTvc+xCoNAEIThDXkQH8FCYhGwsRLEgJ2lEN81VQg2toIW2qVK7z9RREEtHfjg7liWOTslIZzxeJhgYhU+uOmykwQd3rpEaNEg1cMiFzyh4Rc82BU5fqjxf5xS4AstUwMtmJNBm0r4eKCHhtViMzFUTzSsGkd/W9XbrLGXO9zxeG7MBoKmGaM1wCzfAAAAAElFTkSuQmCC) no-repeat 50%;
}

.arrow-up {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAbrQAAG60BIeRSlQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAANpJREFUOE9jGJzAwsJCyM7OztPMzIwPKkQ8sLe353F2dl7v6ur6BEjPBmI1qBRxAGgAh6OjY4m7u/t/oCF/gQacBtJuUGmiAQvQC7YuLi5fgZr/Ozk5fQCyC6ByxANLS0sxoAsuAzX/dXNz+w9kzwKGDydUmijADPSSA9AVv4CG/Ae5CIhjoXL4gY2NjSjQxlKghtdQb5wGGhYClcYPgBotgQG5BqjxN9TpM4CaNaDS+AEoDQA13ABpBNr+G2hQkpWVFS9UmijABDTAEGj7DqAhIFuZIMLYAAMDAPuUQ9EUeG3QAAAAAElFTkSuQmCC) no-repeat 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle arrow-up" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<p> first table</p>
<p>First Content</p>
<!--inner accordion-->
<div class="accordion" id="accordion3">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle arrow-up" data-toggle="collapse" data-parent="#accordion3" href="#collapseInner">
Collapsible Group Item #1
</a>
</div>
<div id="collapseInner" class="accordion-body collapse in">
<div class="accordion-inner">
Inner Accordion
Inner Accordion
Inner Accordion
</div>
</div>
</div>
</div>

</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle arrow-down" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<p> second table</p>
<p>second Content</p>
</div>
</div>
</div>
</div>

提前致谢

最佳答案

使用stopPropagation()

代码:

    $('.accordion-group').on('show', function(e) {
$(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up');
e.stopPropagation();
});
$('.accordion-group').on('hide', function(e) {
$(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down');
e.stopPropagation();
});

演示: http://jsfiddle.net/lotusgodkk/4m1u2rb4/3/

关于jquery - Bootstrap 2.3 嵌套 Accordion 图标更改也发生在父级上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34714815/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com