草庐IT

jquery - Css 过渡不平滑 - 折叠、展开菜单

coder 2023-08-09 原文

我有一个菜单设置为最大宽度和展开/折叠切换。我为此使用 jquery 切换。但是我使用的转换不起作用。

 .campervan-info-list {
   transition: height 1s ease;
 }

我尝试使用 jquery slide toggle slow。但它适用于整个分区。

我在这里错过了什么？

Jsfiddle

最佳答案

你想实现这样的目标吗？

  $('.van-page-read-more').click( function() {
    $(".campervan-info-list").animate({height: "220px"},500);
} );
.campervan-info-expand{
  height: 50px;
  overflow: hidden;
  transition: height 1s ease;
}
<div class="campervan-info-list campervan-info-expand">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat, orci sed faucibus semper, ante risus auctor ligula, ultricies cursus odio nulla ac leo. Vivamus auctor volutpat porta. Morbi venenatis luctus turpis, quis laoreet ante bibendum sit amet. Aliquam vel massa sed orci gravid
  
  <br>
  
  <br>lectus id commodo. Aliquam ultricies justo et magna porttitor tincidunt. Nam ut condimentum turpis. Praesent rutrum ut turpis non finibus. In eu egestas augue, vitae viverra mi. Nunc molestie enim est, luctus volutpat ante laoreet interdum. Proin id fermentum magna. Sed semper mauris urna, non pulvinar quam rhoncus ut. Integer ultrices sodales odio vitae pharetra. Duis a enim nec velit rhoncus pharetra eu a sapien.

Donec sem enim, ornare vitae tellus eu, porta ultricies ligula. Suspendisse in nisi a metus sagittis iaculis. Nullam eu eros eu urna
<br>

lacinia lacinia. Quisque pharetra metus neque, in venenatis sem scelerisque eu. Proin blandit, purus vel volutpat scelerisque, ex orci varius nunc, ut consequat turpis mauris non magna. Mauris pellentesque mauris mi, e
</div>
<br>
<a class="van-page-read-more">Read more</a>

关于jquery - Css 过渡不平滑 - 折叠、展开菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54211206/

不平过渡sectioncodecampervanjqueryhtmlcsscss-transitions

有关jquery - Css 过渡不平滑 - 折叠、展开菜单的更多相关文章

  1. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  2. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  3. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  4. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  5. ruby - Sublime Text 3 多行法折叠 - 2

    所以...SublimeText具有折叠方法的内置功能，但是一旦方法声明跨越多行，它就会失去这种能力。有谁知道插件或使它工作的方法吗？具体来说，我在使用ruby​​时遇到了这个问题(我的团队遵守关于行长度的严格风格指南)，但语言应该无关紧要。 最佳答案 无需单击出现在函数定义第一行旁边的装订线中的向下箭头，您需要做的就是将光标放在函数的一个缩进行上(不是缩进的函数参数，而是在函数定义本身)并使用CtrlShift[键绑定(bind)(在OSX上使用⌘Alt[)折叠函数及其参数。使用CtrlShift](⌘Alt]在OSX上)展开，或

  6. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  7. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  8. css - Rails 4.1 和 Bootstrap 3 字形图标不工作 - 2

    我正在尝试消除使用Bootstrap3的Rails4元素中的glyphicon错误。我没有使用任何Bootstrapgem将其添加到Assets管道中。我手动将bootstrap.css和bootstrap.js添加到各自的app/assets目录下，分别添加到application.css和application.js什么的我现在在网络浏览器的控制台中看到以下内容:GEThttp://localhost:3000/fonts/glyphicons-halflings-regular.woff404(NotFound)localhost/:1GEThttp://localhost:30

  9. ruby - Ruby 中的选项菜单 - 2

    我正在尝试在Ruby中创建一个菜单，以便根据用户输入的内容，取决于调用的类。然后在这种情况下它将返回到“Main”或类“Options”。我希望有人能帮助我。这是我的代码。modulePhysicsG=21C=20000Pi=3.14D=100endclassOptionsputs"Pleaseselect1forAccelerationand2forEnergy."option=gets()ifoption==1thenputs"AccelCalc"#ThisisthebitthatneedstodirecttheusertotheclassAccelCalcelseputs"Ene

  10. css - rails 萨斯 : variables are not passed with @import - 2

    我有一个使用twitterbootstrap和sass的Rails元素。scss文件结构化到文件夹中，所以我有更好的概述。现在我想为包含我的颜色等的全局变量定义一个文件，并将这些值传递给其他文件，这样我就有更少的冗余代码。虽然所有代码都已正确导入和应用，变量不起作用。这是当前的设置:样式表/application.css.scss/**=require_self*=require_tree*//*stylesheets/||–base/||–_reset.scss#Reset/normalize||–_typography.scss#Typographyrules||–componen

随机推荐