Javascript 点击切换文本内容。出于某种原因，它需要2次点击？

我正试图通过jquery更改

元素中的文本。
我很接近！出于某种原因，需要单击两次才能切换文本。 你知道我该怎么解决这个问题吗

HTML

关闭顶部收割台

CSS

.contentTab{
宽度：300px；
高度：49px；
背景：#f1efeff；
边框右上角半径：12px；
边框左上半径：12px；
位置：绝对位置；
左边距：50%；
左：-150px；
利润上限：23px；
光标：指针；
}
.contentTab h1{
颜色：#A9A9；
文本阴影：1px 1px#fcfc；
字体大小：12px；
利润上限：3倍；
字体大小：粗体；
}
.三角{
宽度：7px；
身高：0；
左侧填充：7px；
垫底：7px；
溢出：隐藏；
边缘顶部：8px；
}
.三角上升：之后{
内容：“；
显示：块；
宽度：0；
身高：0；
左边距：-500px；
左边框：500px实心透明；
右边框：500px实心透明；
边框底部：500px实心#b0；
}
.三角下降{
宽度：7px；
身高：0；
左侧填充：7px；
垫底：7px；
溢出：隐藏；
边缘顶部：8px；
-moz变换：scaleY（-1）；
-webkit转换：scaleY（-1）；
变换：scaleY（-1）；
过滤器：flipv；/*IE*/
}
.三角下降：之后{
内容：“；
显示：块；
宽度：0；
身高：0；
左边距：-500px；
左边框：500px实心透明；
右边框：500px实心透明；
边框底部：500px实心#b0；
}
.contentTab:悬停h1，.contentTab:悬停.triangle up:之后{
颜色：#919191；
边框底色：#9191；
}
.content选项卡：悬停{
边缘顶部：18px；
高度：54px；
}
.contentTab h1、.contentTab:hover h1、.contentTab:hover.triangle up:after、.contentTab:hover、.triangle down:after、.triangle down、.contentTab{
-webkit过渡：所有0.25秒都可以轻松过渡；
-moz过渡：所有0.15秒都会变慢；
-ms转换：所有0.15秒都会变慢；
-o型过渡：所有0.15秒均缓解；
过渡：所有0.15秒缓解；
}

JS

$（'.contentTab'）。在（'click'，函数（e）上{
$（'.mainContent'）.toggleClass（“closeHeader”）；
$（'.contentTab'）.toggleClass（“contentTabActive”）；
$（'.triangle up'）.toggleClass（“triangle down”）；
$（“.triangle down”）.insertAfter（“.contentTab h1”）；
$（“.triangle-up:not（.triangle-down）”）.insertBefore（“.contentTab h1”）；
e、 预防默认值（）；
$（“.contentTab”）。单击（函数（）{$（“.contentTab h1”）。文本（函数（i，v）{
返回v===“关闭顶部标题”？“打开顶部标题”：“关闭顶部标题”}）；
});

是的，您的JS代码应该避免嵌套

单击事件初始化。我想你是想做那样的事

js

第一次单击时没有更改您的文本，因为您定义了一个函数来更改嵌套到另一个事件侦听器的事件侦听器中的文本。这意味着没有事件监听器在第一次单击时切换文本。事实上，事件侦听器（切换文本）是在第一次单击后定义的，这就是为什么需要两次单击来切换文本

因此，您的代码只需删除嵌套的事件侦听器，并在第一个
onclick
中定义您的函数即可工作

$('.contentTab').on('click', function(e) {
  $('.mainContent').toggleClass("closeHeader");
  $('.contentTab ').toggleClass("contentTabActive");
  $('.triangle-up').toggleClass("triangle-down");
  $(".triangle-down").insertAfter(".contentTab h1");
  $(".triangle-up:not(.triangle-down)").insertBefore(".contentTab h1");
  $(".contentTab h1").text( function(i, v) {
    return v === 'CLOSE TOP HEADER' ? 'OPEN TOP HEADER' : 'CLOSE TOP HEADER'
  });

e.preventDefault();

}))

jsIDLE:
尝试从已单击函数中删除内部单击函数：


$（'.contentTab'）。在（'click'，函数（e）上{
$（'.mainContent'）.toggleClass（“closeHeader”）；
$（'.contentTab'）.toggleClass（“contentTabActive”）；
$（'.triangle up'）.toggleClass（“triangle down”）；
$（“.triangle down”）.insertAfter（“.contentTab h1”）；
$（“.triangle-up:not（.triangle-down）”）.insertBefore（“.contentTab h1”）；
e、 预防默认值（）；
$（“.contentTab h1”）.text（函数（i，v）{
返回v=='关闭顶部标题'？'打开顶部标题'：'关闭顶部标题'}）；
});
.contentTab{
宽度：300px；
高度：49px；
背景：#f1efeff；
边框右上角半径：12px；
边框左上半径：12px；
位置：绝对位置；
左边距：50%；
左：-150px；
利润上限：23px；
光标：指针；
}
.contentTab h1{
颜色：#A9A9；
文本阴影：1px 1px#fcfc；
字体大小：12px；
利润上限：3倍；
字体大小：粗体；
}
.三角{
宽度：7px；
身高：0；
左侧填充：7px；
垫底：7px；
溢出：隐藏；
边缘顶部：8px；
}
.三角上升：之后{
内容：“；
显示：块；
宽度：0；
身高：0；
左边距：-500px；
左边框：500px实心透明；
右边框：500px实心透明；
边框底部：500px实心#b0；
}
.三角下降{
宽度：7px；
身高：0；
左侧填充：7px；
垫底：7px；
溢出：隐藏；
边缘顶部：8px；
-moz变换：scaleY（-1）；
-webkit转换：scaleY（-1）；
变换：scaleY（-1）；
过滤器：flipv；/*IE*/
}
.三角下降：之后{
内容：“；
显示：块；
宽度：0；
身高：0；
左边距：-500px；
左边框：500px实心透明；
右边框：500px实心透明；
边框底部：500px实心#b0；
}
.contentTab:悬停h1，.contentTab:悬停.triangle up:之后{
颜色：#919191；
边框底色：#9191；
}
.content选项卡：悬停{
边缘顶部：18px；
高度：54px；
}
.contentTab h1、.contentTab:hover h1、.contentTab:hover.triangle up:after、.contentTab:hover、.triangle down:after、.triangle down、.contentTab{
-webkit过渡：所有0.25秒都可以轻松过渡；
-moz过渡：所有0.15秒都会变慢；
-ms转换：所有0.15秒都会变慢；
-o型过渡：所有0.15秒均缓解；
过渡：所有0.15秒缓解；
}

关闭顶部收割台
这是因为每次单击元素时，您都要在初始的
单击
事件侦听器中添加一个新的事件侦听器。。。删除嵌套事件
$('.contentTab').on('click', function(e) {
  $('.mainContent').toggleClass("closeHeader");
  $('.contentTab ').toggleClass("contentTabActive");
  $('.triangle-up').toggleClass("triangle-down");
  $(".triangle-down").insertAfter(".contentTab h1");
  $(".triangle-up:not(.triangle-down)").insertBefore(".contentTab h1");
  $(".contentTab h1").text( function(i, v) {
    return v === 'CLOSE TOP HEADER' ? 'OPEN TOP HEADER' : 'CLOSE TOP HEADER'
  });

e.preventDefault();