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元素（更多跨度根本不会移动）。

此代码有什么问题，如何解决？很高兴得到任何帮助。

另外。有关其他信息： <_p>部分的-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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery：.toggle代码atlernative无法在第二次点击时使用

1 个答案: