点击时切换文字内容.出于某种原因需要2次点击？

Question

我试图<h1>通过jquery 更改元素中的文本.
我很亲密!由于某种原因,它需要2次点击才能切换文本.知道如何解决这个问题吗？

DEMO

HTML

<center> 
<div class="contentTab"> 
<div class="triangle-up"></div>
<h1>CLOSE TOP HEADER</h1>
</div>
</center>

CSS

.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;
}

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

Answer 1

是的,您的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);
});