jjzjj

javascript - jQuery .toggle() 和媒体查询

coder 2024-07-23 原文

我在 button 元素上使用 .toggle():

$("header button").click(function(event){
    $(".site-nav-wrapper").toggle();
    event.preventDefault();
});

这很好用。问题是如果 button 切换到 display:none 然后我改变设备方向，触发我的桌面媒体查询，尽管我重新强制 display:block; 在桌面媒体查询上，按钮 保持切换到 display:none:

(萨斯):

.site-nav-wrapper{

            //Mobile First
            display:none;

            @include breakpoint($breakpoint-lg) {
                display:block;
            }
}

有没有办法重置 toggle() 函数正在存储的内容？

最佳答案

toggle 使用内联样式，它会覆盖您在样式表中所做的任何事情。

要获得所需的结果，您应该使用特殊的hidden 类来隐藏元素，并使用toggleClass。相反。

SASS:

.site-nav-wrapper.hidden {

    display: none;

    @include breakpoint($breakpoint-lg) {
        display: block;
    }
}

JS:

$("header button").click(function(event){
    $(".site-nav-wrapper").toggleClass('hidden');
    event.preventDefault();
});

关于javascript - jQuery .toggle() 和媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12047858/

javascriptjQuerycodesectiondisplay

有关javascript - jQuery .toggle() 和媒体查询的更多相关文章

  1. ruby - ECONNRESET (Whois::ConnectionError) - 尝试在 Ruby 中查询 Whois 时出错 - 2

    我正在用Ruby编写一个简单的程序来检查域列表是否被占用。基本上它循环遍历列表，并使用以下函数进行检查。require'rubygems'require'whois'defcheck_domain(domain)c=Whois::Client.newc.query("google.com").available?end程序不断出错(即使我在google.com中进行硬编码)，并打印以下消息。鉴于该程序非常简单，我已经没有什么想法了-有什么建议吗？/Library/Ruby/Gems/1.8/gems/whois-2.0.2/lib/whois/server/adapters/base.

  2. ruby-on-rails - 在 Rails 和 ActiveRecord 中查询时忽略某些字段 - 2

    我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道，是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔？posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr

  3. 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来发送

  4. 怎样用一台手机做自媒体？ - 2

    其实做自媒体的成本并不高，入门只需要一部手机即可！在手机上找视频素材、使用手机剪辑视频、最后使用手机发布视频作品获得收益！方法并不难，今天这期内容就来给粉丝们分享一种小方法，每天稳定收益100-300，抓紧点赞收藏！1、找素材（1）使用手机拍摄自己喜欢的经典段落，使用程序把文案内容提取出来（2）也可以在豆瓣、知乎、微博等网站中找一些自己需要的文案素材（3）把文案进行润色修改，可以加入一些自己的观点（4）视频素材可以使用软件中自带的素材，也可以在素材网站中下载完整版的素材2、文案配音（1）把复制好的文案直接导入小程序中（2）调整音色、音调后一键合成音频即可（3）可以选择自己朗读配音，需要花一点时

  5. sql - 查询忽略时间戳日期的时间范围 - 2

    我正在尝试查询我的Rails数据库(Postgres)中的购买表，我想查询时间范围。例如，我想知道在所有日期的下午2点到3点之间进行了多少次购买。此表中有一个created_at列，但我不知道如何在不搜索特定日期的情况下完成此操作。我试过:Purchases.where("created_atBETWEEN?and?",Time.now-1.hour,Time.now)但这最终只会搜索今天与那些时间的日期。 最佳答案 您需要使用PostgreSQL'sdate_part/extractfunction从created_at中提取小时

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

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby-on-rails - solr 清理查询 - 2

    我在Rails上使用带有ruby​​的solr。一切正常，我只需要知道是否有任何现有代码来清理用户输入，比如以?开头的查询。或* 最佳答案 我不知道执行此操作的任何代码，但理论上可以通过查看parsingcodeinLucene来完成并搜索thrownewParseException(只有16个匹配!)。在实践中，我认为您最好只捕获代码中的任何solr异常并显示“无效查询”消息或类似信息。编辑:这里有几个“sanitizer”:http://pivotallabs.com/users/zach/blog/articles/937-s

  9. ruby-on-rails - Rails 3 在一个查询中包含多个表 - 2

    我正在为锦标赛开发一个Rails应用程序。我在这个查询中使用了三个模型:classPlayertruehas_and_belongs_to_many:tournamentsclassTournament:destroyclassPlayerMatch"Player",:foreign_key=>"player_one"belongs_to:player_two,:class_name=>"Player",:foreign_key=>"player_two"在tournaments_controller的显示操作中，我调用以下查询:Tournament.where(:id=>params

  10. ruby-on-rails - Sunspot:如何对具有不同值的多个字段进行全文查询？ - 2

    我想用sunspot重现以下原始solr查询q=exact_term_text:fooORterm_textv:foo*ORalternate_text:bar*但我无法通过标准的太阳黑子界面理解这是否可能以及如何实现，因为看起来:fulltext方法似乎不接受多个文本/搜索字段参数我不知道将什么参数作为第一个参数传递给fulltext，就好像我通过了"foo"或"bar"结果不匹配如果我传递一个空参数，我得到一个q=*:*范围过滤器(例如with(:term).starting_with('foo*')(顾名思义)作为过滤器查询应用，因此不参与评分。似乎可以手动编写字符串(或者可能使

随机推荐