jQuery：.toggle代码atlernative不能在第二次点击时工作(jQuery: .toggle code atlernative not working on second click)

网站建设1160 更新时间：2025-06-08 08:57:52

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

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

I'm making a website element containing a text box that would expand when a correct span is clicked. The span would toggle between having the mask of the box have parameters x, and parameters y (being default). In the Registering jQuery click, first and second click answer I found the right code. After tweaking the names it looked like this:

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

Unfortunately the code works only on the first click, and only for the .text element (the more span does not move at all).

What could be wrong with this code, and how can it be fixed? Would be glad for any help.

Also. For additional information: -html of the portion

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

And the styles of inner elements:

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

最满意答案

$('#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> 
  
 
 
 
  
  $('#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代码atlernative不能在第二次点击时工作(jQuery: .toggle code atlernative not working on second click)

                 我正在制作一个包含文本框的网站元素，当单击正确的跨度时，该文本框会展开。 跨度将在框的掩码具有参数x和参数y（默认）之间切换。 在注册jQuery单击，第一次和第二次单击答案我找到了正确的代码。 调整名称后，它看起来像这样：  
$('#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;
}
I'm making a website element containing a text box that would expand when a correct span is clicked. The span would toggle between having the mask of the box have parameters x, and parameters y (being default). In the Registering jQuery click, first and second click answer I found the right code. After tweaking the names it looked like this: 
$('#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);
});
 
Unfortunately the code works only on the first click, and only for the .text element (the more span does not move at all). 
What could be wrong with this code, and how can it be fixed? Would be glad for any help. 
Also. For additional information: -html of the portion 
<div class="txtbox">
    <div class="text">       
        <p>Lorem ipsum</p> 
    </div> 
</div>
<span class="extbutton" id="more">more info:</span>
 
And the styles of inner elements: 
.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;
}

                最满意答案
                
                    
                         
 
  
  $('#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> 
  
 
 
 
  
  $('#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>

本文发布于:2023-08-28，感谢您对本站的认可！

本文链接:http://torson.com.cn/wangzhan/1693201841a696241.html

jQuery：.toggle代码atlernative不能在第二次点击时工作(jQuery: .toggle code atlernative not working on second click)

最满意答案

最满意答案

发布评论取消回复

最近发表

相关推荐

标签列表

jQuery：.toggle代码atlernative不能在第二次点击时工作(jQuery: .toggle code atlernative not working on second click)

最满意答案

最满意答案

发布评论 取消回复

最近发表

相关推荐

标签列表

发布评论取消回复