javascript - 当 Accordion 内部有一些点击事件时 Accordion 图标正在改变 : Bootstrap 2. 3 版本

Question

我在我的元素中使用 bootstrap 2.3。因为 Accordion 体内有一个弹出框，我正在根据显示和隐藏功能更改 Accordion 图标，它工作正常。但是当我在 Accordion 体内有任何弹出窗口时，一旦触发该事件，我的图标就会发生变化。

产生问题的步骤:

1. 先打开 Accordion
2. 点击“click for popover”按钮并检查天气 Accordion 标题图标是否更改。
3. 也尝试第二次，如果第一次没有发生。

My Fiddle

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

$('#elem').popover();

.arrow-down {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAAHwAAAB8ARUP7eQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAACISURBVChTvc+xCoNAEIThDXkQH8FCYhGwsRLEgJ2lEN81VQg2toIW2qVK7z9RREEtHfjg7liWOTslIZzxeJhgYhU+uOmykwQd3rpEaNEg1cMiFzyh4Rc82BU5fqjxf5xS4AstUwMtmJNBm0r4eKCHhtViMzFUTzSsGkd/W9XbrLGXO9zxeG7MBoKmGaM1wCzfAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}

.arrow-up {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAbrQAAG60BIeRSlQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAANpJREFUOE9jGJzAwsJCyM7OztPMzIwPKkQ8sLe353F2dl7v6ur6BEjPBmI1qBRxAGgAh6OjY4m7u/t/oCF/gQacBtJuUGmiAQvQC7YuLi5fgZr/Ozk5fQCyC6ByxANLS0sxoAsuAzX/dXNz+w9kzwKGDydUmijADPSSA9AVv4CG/Ae5CIhjoXL4gY2NjSjQxlKghtdQb5wGGhYClcYPgBotgQG5BqjxN9TpM4CaNaDS+AEoDQA13ABpBNr+G2hQkpWVFS9UmijABDTAEGj7DqAhIFuZIMLYAAMDAPuUQ9EUeG3QAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}
.well {
    margin-top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.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>

				<div class="well">
					<a id="elem" href="#" class="btn btn-danger" rel="popover" data-original-title="Example Popover" data-content="Readymade terry richardson fap iphone skateboard. Lomo fixie pop-up, whatever pickled pour-over keytar selvage godard.">cliick for popover</a>
				</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>

Answer 1

您不必为更改箭头做“额外”工作。 Bootstrap 根据 accordion-group 状态添加/删除 collpased 类。您可以使用此类名称来更改箭头状态。

html

添加collapsed类名来设置 Accordion 处于折叠状态

<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">Collapsible Group Item #1</a>

并从相应内容div中移除in类名

<div id="collapseOne" class="accordion-body collapse"></div>

CSS

.accordion-toggle.collapsed {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAAHwAAAB8ARUP7eQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAACISURBVChTvc+xCoNAEIThDXkQH8FCYhGwsRLEgJ2lEN81VQg2toIW2qVK7z9RREEtHfjg7liWOTslIZzxeJhgYhU+uOmykwQd3rpEaNEg1cMiFzyh4Rc82BU5fqjxf5xS4AstUwMtmJNBm0r4eKCHhtViMzFUTzSsGkd/W9XbrLGXO9zxeG7MBoKmGaM1wCzfAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}

.accordion-toggle {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAMCAYAAABr5z2BAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAbrQAAG60BIeRSlQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAANpJREFUOE9jGJzAwsJCyM7OztPMzIwPKkQ8sLe353F2dl7v6ur6BEjPBmI1qBRxAGgAh6OjY4m7u/t/oCF/gQacBtJuUGmiAQvQC7YuLi5fgZr/Ozk5fQCyC6ByxANLS0sxoAsuAzX/dXNz+w9kzwKGDydUmijADPSSA9AVv4CG/Ae5CIhjoXL4gY2NjSjQxlKghtdQb5wGGhYClcYPgBotgQG5BqjxN9TpM4CaNaDS+AEoDQA13ABpBNr+G2hQkpWVFS9UmijABDTAEGj7DqAhIFuZIMLYAAMDAPuUQ9EUeG3QAAAAAElFTkSuQmCC) no-repeat 300px 10px;
}

js

删除show 和hide 的句柄

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

检查这个fiddle