单击时切换文本内容.由于某种原因，它需要2次点击

是的，你的JS代码应该避免嵌套click事件初始化。我想你试着做这样的事情。

.js

 $('.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");
  var h1 =  $(this).find("h1");
  var str =h1.text() === 'CLOSE TOP HEADER' ? 
               'OPEN TOP HEADER' : 
               'CLOSE TOP HEADER'
    h1.text(str);
});

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

因此，您的代码只需删除该嵌套事件侦听器并在第一个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();

}）;

JSFiddle： https://jsfiddle.net/99th1w75/5/

尝试从已经单击的函数中删除内部单击函数：

  $('.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");
  e.preventDefault();
  $(".contentTab h1").text(function(i, v){
   return v === 'CLOSE TOP HEADER' ? 'OPEN TOP HEADER' : 'CLOSE TOP HEADER' });
});

.contentTab{
	width:300px;
	height:49px;
	background:#f1efef;
	border-top-right-radius:12px;
	border-top-left-radius:12px;
	position:absolute;
	margin-left:50%;
	left:-150px;
	margin-top:23px;
	cursor:pointer;
		}
.contentTab h1{
	color:#a9a9a9;
	text-shadow: 1px 1px #fcfcfc;
	font-size:12px;
	margin-top:3px;
	font-weight:bold;
		}
.triangle-up {
    width: 7px;
    height: 0;    
    padding-left: 7px;
    padding-bottom: 7px;
    overflow: hidden;
	margin-top:8px;
	}
.triangle-up:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 500px solid #b0b0b0;
	}
	
.triangle-down {
    width: 7px;
    height: 0;    
    padding-left: 7px;
    padding-bottom: 7px;
    overflow: hidden;
	margin-top:8px;
	-moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: flipv; /*IE*/
	}
.triangle-down:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 500px solid #b0b0b0;
	}
.contentTab:hover h1, .contentTab:hover .triangle-up:after{
	color:#919191;
	border-bottom-color:#919191;
		}
	
.contentTab:hover {
	margin-top:18px;
	height:54px;
		}
		
.contentTab h1, .contentTab:hover h1, .contentTab:hover .triangle-up:after, .contentTab:hover, .triangle-down:after, .triangle-down, .contentTab {
	-webkit-transition: all 0.25s ease-out;
		-moz-transition: all 0.15s ease-out;
		-ms-transition: all 0.15s ease-out;
		-o-transition: all 0.15s ease-out;
		transition: all 0.15s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center> 
<div class="contentTab"> 
<div class="triangle-up"></div>
<h1>CLOSE TOP HEADER</h1>
</div>
</center>