草庐IT

javascript - 删除溢出类时在标题上制作 slideDown()

coder 2024-05-05 原文

我有一个弹出窗口，在单击时会滑入 View 。我制作标题的方式是使用以下 css:

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

我使用 jQuery 根据点击添加/删除。
但是当ellipsis 类被移除时，标题只是“POPS”进入 View 。

所以我的问题是:是否可以使用 jquery 或 css 简化从 hidden 到 not 的转换？

此处发生的代码示例:https://jsfiddle.net/dzm50k39/4/

最佳答案

检查这个

 $(document).ready(function(){
       
      
 var havePoppedUp = 0;      
 $(window).on('scroll', function() {
   var st = $(this).scrollTop();
   var wh = $(document).height() - $(window).height();
   var perc = (st*100)/wh;
   
   if(perc > 50 && havePoppedUp == 0)
       {
           havePoppedUp = 1;
            $(".popupContent").css("display", "inline");
            $('.popupHeader h7').removeClass("ellipsis");  
           
       }
});


    $(".closepopup").click(function(){
        $(".popupContainer").fadeOut()
    });
      
    $(".closepopupBtn").click(function(){
        $(".popupContainer").hide()
    });


    $(".popupHeader").click(function(){
        if($('.popupContent:visible').length == 0)
            {
            $(".popupContent").slideDown(600);
           $('.popupHeader p').toggleClass( "ellipsis", 600 );
            }
        else {
            
            $(".popupContent").slideUp(600);
            $('.popupHeader p').toggleClass( "ellipsis", 600 );
            
        }    
            
    });        
                
});
.popupContainer {
    padding: 5px 15px 0 15px;
    position: fixed; 
    background-color: #718F97;
    bottom: 0;
    right: 50px;
    max-width: 300px;
    color: white;

}
.popupHeader {
    width: 100%;
    height: auto;
}
.popupHeader p {
    max-width: 85%;
    float: left;
    margin-bottom: 5px;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.popupHeader button {
    float: right;
    text-decoration: none;
    border: none;
    background-color: #718F97;
    color: white;
    margin-bottom: 5px;
}

.popupContent {
    display: none; 
}

.popupContent p {
    max-width: 100%;
    clear: both;
}

.popupContent button {
    width: 100%;
    margin-bottom: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="popupContainer">
          <div class="popupHeader clearfix">
            <p class="ellipsis"><b> Lorem ipsum dolar sit amt flip flop and something else</b></p><button class="closepopupBtn"><b>x</b></button>
          </div>
          <div class="popupContent">
                <p>
                    Text to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insertText to insert
                </p>
              <button class="button" style="background-color: green; width: 100%;" onclick="location.href='http://google.com';">Yes</button>
              <button  class="closepopup" type="button" style="background-color: orange" href="#">No</button>
          </div>
      </div>

关于javascript - 删除溢出类时在标题上制作 slideDown()，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42300476/

javascriptslideDown34insertTextsectionjquerycss

有关javascript - 删除溢出类时在标题上制作 slideDown()的更多相关文章

  1. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  2. ruby - 我可以使用 Ruby 从 CSV 中删除列吗？ - 2

    查看Ruby的CSV库的文档，我非常确定这是可能且简单的。我只需要使用Ruby删除CSV文件的前三列，但我没有成功运行它。 最佳答案 csv_table=CSV.read(file_path_in,:headers=>true)csv_table.delete("header_name")csv_table.to_csv#=>ThenewCSVinstringformat检查CSV::Table文档:http://ruby-doc.org/stdlib-1.9.2/libdoc/csv/rdoc/CSV/Table.html

  3. ruby - 我可以使用 aws-sdk-ruby 在 AWS S3 上使用事务性文件删除/上传吗？ - 2

    我发现ActiveRecord::Base.transaction在复杂方法中非常有效。我想知道是否可以在如下事务中从AWSS3上传/删除文件:S3Object.transactiondo#writeintofiles#raiseanexceptionend引发异常后，每个操作都应在S3上回滚。S3Object这可能吗？？ 最佳答案 虽然S3API具有批量删除功能，但它不支持事务，因为每个删除操作都可以独立于其他操作成功/失败。该API不提供任何批量上传功能(通过PUT或POST)，因此每个上传操作都是通过一个独立的API调用完成的

  4. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  5. ruby - 如何安全地删除文件？ - 2

    在Ruby中是否有Gem或安全删除文件的方法？我想避免系统上可能不存在的外部程序。“安全删除”指的是覆盖文件内容。 最佳答案 如果您使用的是*nix，一个很好的方法是使用exec/open3/open4调用shred:`shred-fxuz#{filename}`http://www.gnu.org/s/coreutils/manual/html_node/shred-invocation.html检查这个类似的帖子:Writingafileshredderinpythonorruby?

  6. ruby-on-rails - 标准化文件名的字符串，删除重音和特殊字符 - 2

    我正在尝试找到一种方法来规范化字符串以将其作为文件名传递。到目前为止我有这个:my_string.mb_chars.normalize(:kd).gsub(/[^\x00-\x7F]/n,'').downcase.gsub(/[^a-z]/,'_')但第一个问题:-字符。我猜这个方法还有更多问题。我不控制名称，名称字符串可以有重音符、空格和特殊字符。我想删除所有这些，用相应的字母('é'=>'e')替换重音符号，并将其余的替换为'_'字符。名字是这样的:“Prélèvements-常规”“健康证”...我希望它们像一个没有空格/特殊字符的文件名:“prelevements_routin

  7. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  8. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  9. ruby-on-rails - 为什么在 Rails 5.1.1 中删除了 session 存储初始化程序 - 2

    我去了这个website查看Rails5.0.0和Rails5.1.1之间的区别为什么5.1.1不再包含:config/initializers/session_store.rb？谢谢 最佳答案 这是删除它的提交:Setupdefaultsessionstoreinternally,nolongerthroughanapplicationinitializer总而言之，新应用没有该初始化器，session存储默认设置为cookie存储。即与在该初始值设定项的生成版本中指定的值相同。 关于

  10. ruby - 如果它是标点符号，我怎么能从字符串中删除最后一个字符，在 ruby​​ 中？ - 2

    啊，正则表达式有点困惑。我正在尝试删除字符串末尾所有可能的标点符号:ifstr[str.length-1]=='?'||str[str.length-1]=='.'||str[str.length-1]=='!'orstr[str.length-1]==','||str[str.length-1]==';'str.chomp!end我相信有更好的方法来做到这一点。有什么指点吗？ 最佳答案 str.sub!(/[?.!,;]?$/,'')[?.!,;]-字符类。匹配这5个字符中的任何一个(注意，。在字符类中并不特殊)?-前一个字符或组

随机推荐