为什么引导程序中的图标在崩溃时只更改一次？为什么 jquery 代码只运行一次？

Question

我有一个使用过的手风琴和来自 bootstrap 的折叠类，并在卡片标题中添加了很棒的字体图标。使用 jquery，我使用折叠事件将图标更改为向上箭头和向下箭头。所有这些都可以正常工作，但只有一次图标更改..一旦我扩展了三个卡片主体，所有图标都是向上箭头..之后它没有改变。加载 html 页面时它只工作一次..我能做些什么来重复同样的..

 <script>
  	$(document).ready(function(){
  		$('.collapse').on('hide.bs.collapse',function(){
  		$(this).parent().find('.fa-angle-down').removeClass('.fas fa-angle-up').addClass('.fas fa-angle-down');});
  		$('.collapse').on('show.bs.collapse',function(){
  		$(this).parent().find('.fa-angle-down').removeClass('.fas fa-angle-down').addClass('.fas fa-angle-up');});

  	});
  </script>

<div class="container">

		<div id="accordian">
			<div class="card">
				<div class="card-header">
					<i class="fas fa-angle-down"></i>
					<a href="#collapse1" data-toggle="collapse">Asia</a>
				</div>
				
					<div class="card-body collapse"data-parent="#accordian" id="collapse1">
						<ul>
							

							<li>India</li>
							<li>China</li>
							<li>Japan</li>
						</ul>
			</div>
		</div>

		<div class="card">
				<div class="card-header">
					<i class="fas fa-angle-down"></i>
					<a href="#collapse2" data-toggle="collapse">Europe</a>
				</div>
				
					<div class="card-body collapse "data-parent="#accordian" id="collapse2">
						<ul>
							<li>Italy</li>
							<li>Germany</li>
							<li>France</li>
						</ul>
			</div>
		</div>

		<div class="card">
				<div class="card-header">
					<i class="fas fa-angle-down"></i>
					<a href="#collapse3" data-toggle="collapse">North America</a>
				</div>
				
					<div class="card-body collapse"data-parent="#accordian" id="collapse3">
						<ul>
							<li>Canada</li>
							<li>Mexico</li>
							<li>US</li>
						</ul>
			</div>
		</div>

	</div>
	</div>

Answer 1

您已经在$(document).ready(function() 中编写了图标更改代码。因此，它只会在您的页面准备就绪时运行一次。您可以在onclick() 事件中编写此内容。