javascript - jQuery: .toggle code atlernative 在第二次点击时不起作用

Question

我正在制作一个包含文本框的网站元素，该文本框会在单击正确的跨度时展开。跨度将在框的掩码具有参数 x 和参数 y(默认)之间切换。 在Registering jQuery click, first and second click answer 我找到了正确的代码。调整名称后，它看起来像这样:

$('#more').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
      $('.text').css('clip', 'rect(0px,375px,220px,0px);');
      $(this).css('top', '815px;');
  } else {
    $('.text').css('clip', 'rect(0px,375px,800px,0px)');
      $(this).css('top', '235px;');
  }
  $(this).data("clicks", !clicks);
});

不幸的是，代码仅在第一次点击时有效，并且仅适用于 .text 元素(更多的跨度根本不会移动)。

这段代码可能有什么问题，如何修复？ 很乐意提供任何帮助。

还有。如需更多信息: -html 部分

<div class="txtbox">
    <div class="text">       
        <p>Lorem ipsum</p> 
    </div> 
</div>
<span class="extbutton" id="more">more info:</span>

以及内部元素的样式:

.text{
    display: block;
    float: left;
    position:absolute;
    width: 375px;
    height: 700px;
    color: white;
    left: 315px;
    top: 18px;
    background-color:  rgba(0, 0, 0, 0.55);
    clip: rect(0px,375px,220px,0px); 
    z-index:0;

}

.text, #more{
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.extbutton{
    color: white;
    display:block;
    width:100%;
    background-color: black;
    text-align: center;
}


#more{
    position:absolute;
    width:375px;
    left:315px;
    top:235px;
    z-index: 5;
}

Answer 1

$('#more').click(function(){
  
$('#textToHide').toggleClass('hideText');
});

.text{
    display: block;
    float: left;
    position:realtive;
    width: 375px;
    height: 200px;
    color: white;
    left: 315px;
    top: 18px;
    background-color:  gray;
   overflow:hidden;
}

.hideText{
   
   height:700px;
}

.text, #more{
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

.extbutton{
    color: white;
    display:block;
    width:100%;
    background-color: black;
    text-align: center;
}


#more{
    position:realtive;
    display:block;
    width:375px;
    
    
    z-index: 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div   class="txtbox">
    <div  id="textToHide" class="text ">       
        <p>Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p> 
    </div> 
</div>
<span class="extbutton " id="more">more info:</span>