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

Question

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

$('#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>

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

jQuery: .toggle code atlernative not working on second click

html

javascript

css

jquery

click