Question

我希望在单击折叠时使用类来更改文本和Class Controller extends Controller{ // }和show/hidde。

每次执行上面的代码时，代码都会再执行一次，但我不知道为什么，

示例：

svg icon

这是我的代码：

1st time = `alert(show)`
2nd time = `alert(hide), alert(hide)`
3er time = `alert(show), alert(show), alert(show)`
etc...

编辑：

这是html代码：

$('span[name="serviceCollapse"]').click(function() {
        var target = $(this).attr("data-target");
        var label = $(this).find("label");
        var span = $(this);


        $(target).on('hide.bs.collapse', function () {
            label.text("Mostrar más servicios ");
            alert("hide");
            var arrowUp = span.find(".d-inline");
            var arrowDown = span.find(".d-none");

            arrowUp.removeClass("d-inline");
            arrowUp.addClass("d-none");

            arrowDown.removeClass("d-none");
            arrowDown.addClass("d-inline");
        });

        $(target).on('show.bs.collapse', function () {
            label.text("Mostrar menos servicios ");
            alert("show");
            var arrowDown = span.find(".d-inline");
            var arrowUp = span.find(".d-none");

            arrowDown.removeClass("d-inline");
            arrowDown.addClass("d-none");

            arrowUp.addClass("d-inline");
            arrowUp.removeClass("d-none");
        });
    });

Answer 1

实际上，根据您的代码，您将添加多个事件处理程序，而您只需要在最初的监听器上添加一次事件处理程序即可。每次发生单击时，都会在导致问题的事件侦听器上附加更多处理程序。

Answer 2

解决方案：

仅将事件处理程序设置一次。并在“ serviceCollapse”的点击事件中检查其状态以打印警报消息。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<body>

<div class="col-12 mt-2">
 <span class="collapsed" name="serviceCollapse" data-target="#service1" data-toggle="collapse">
  <label class="text-custom-primary bold-300">Mostrar más servicios </label>
  <span class="d-inline">arrowDownSvgIcon</span>
  <span class="d-none">arrowUpSvgIcon</span>
 </span>

 <div id="service1" class="collapse mt-3">
  collapsable
 </div>         
</div>

<script>
$(document).ready(function() { 
	var target = $('span[name="serviceCollapse"]').attr("data-target");

	$(target).on('hide.bs.collapse', function () {
		var label = $(this).find("label");
		var span = $(this);
		label.text("Mostrar más servicios ");
		var arrowUp = span.find(".d-inline");
		var arrowDown = span.find(".d-none");
		arrowUp.removeClass("d-inline");
		arrowUp.addClass("d-none");
		arrowDown.removeClass("d-none");
		arrowDown.addClass("d-inline");
	});

	$(target).on('show.bs.collapse', function () {
		var label = $(this).find("label");
		var span = $(this);
		label.text("Mostrar menos servicios ");
		var arrowDown = span.find(".d-inline");
		var arrowUp = span.find(".d-none");
		arrowDown.removeClass("d-inline");
		arrowDown.addClass("d-none");
		arrowUp.addClass("d-inline");
		arrowUp.removeClass("d-none");
	});

	$('span[name="serviceCollapse"]').click(function() {
		console.log($(this).attr("class"));
		if ($(this).attr("class") === "collapsed") alert ("show");
		else alert("hide");
	}); 
});	
	
</script>
</body>
</html>

如何避免崩溃动作多次触发

2 个答案: