草庐IT

jquery - 切换 div 跳回到页面顶部

coder 2023-08-11 原文

我有一个页面，其中包含可点击的 div，点击时会切换内容。第二次点击 div 时(关闭内容)，页面跳回顶部。

我看到这是其他人遇到的问题，但我找到的所有解决方案都与 anchor 标记有关，这不是这里的问题。

我已尝试根据解决方案 here 更改我的代码并添加 return false; 和 event.preventDefault(); 但这些都不起作用。我做错了什么？

jQuery: 

    $(document).ready(function(){
        $('h1').animate({"right":"147px"},3000);
        $('.more').toggle(
                function(){
                    $(this).css({
                        'z-index':'100',
                        'background-position': '41px 0px'
                        });
                    $('#heroFullColor').hide();
                    $('#heroNoColor').show();
                    $('div.' + $(this).attr('id')).fadeIn('fast');
                    $('.more').not(this).hide();
                },
                function(){
                    $(this).css({
                        'background-position': '0px 0px'
                            });
                    $('div.' + $(this).attr('id')).fadeOut('fast');                 
                    $('#heroNoColor, .infoWindow').hide();
                    $('#heroFullColor').fadeIn('fast');                 
                    $('.more').not(this).show();
                });
    });

HTML 结构(在页面上重复多次):

    <div class="more" id="franceFlag"></div>
    <div class="infoWindow franceFlag">
        <img class="imageOn" src="images/lp_foundry_on-franceFlag.jpg" width="71" height="213" alt="French Flag" id="franceFlagOn" />
        <p class="franceFlag">blah blah blah</p>
    </div>      
    <div class="more" id="heliBoth"></div>
    <div class="infoWindow heliBoth">
        <img class="imageOn" src="images/lp_foundry_on-heliBoth.jpg" width="296" height="750" alt="Helicopters" id="heliBothOn" />
        <p class="heliBoth">blah blah blah</p>
    </div>

Here is a fiddle - 如果你滚动到右下角，然后点击旗帜旁边的 + 号，你就会明白我的意思了。

最佳答案

这是因为您隐藏了提供容器高度的元素，然后显示了另一个元素。所以它暂时没有高度。

如果你明确地给你的容器一个高度，那将不会发生。例如。

#lp-foundry-container {
height: 940px;
}

第一次点击时不会发生同样的事情，因为隐藏和显示是即时进行的。如果你要改变

$('#heroNoColor').show();

到

$('#heroNoColor').fadeIn('fast');

就像关闭函数一样，第一次点击时也会发生同样的事情。

关于jquery - 切换 div 跳回到页面顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28159252/

jquerydiv3934codehtml

有关jquery - 切换 div 跳回到页面顶部的更多相关文章

  1. ruby-on-rails - Ruby on Rails with Haml - 如何从 erb 切换 - 2

    我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗？此外，仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件？谢谢! 最佳答案 是的，您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题，删除public/index/h

  2. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  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. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

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

  6. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  7. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行，我想让它们一个接一个地显示，但如果表格不适合当前页面，请将其放在下一页，然后继续。我已将表格放入事务中，以便我可以回滚然后打印它(如果高度适合当前页面)，但我如何获得表格高度？我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  8. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？ 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  9. ruby-on-rails - RoR && "coming soon"页面 - 2

    我正在寻找一种简单的方法来为我在RubyonRails上的项目实现简单的“即将推出”(预启动)页面。用户应该能够留下电子邮件以便在项目启动时收到通知。有没有这样的插件\gem？或者我应该自己做... 最佳答案 LaunchingSoon是一个Rails插件。它还集成了MailChimp或Campaignmonitor. 关于ruby-on-rails-RoR&&"comingsoon"页面，我们在StackOverflow上找到一个类似的问题： https:/

  10. ruby - 如何让 GitHub 页面使用 master 分支？ - 2

    我有一个使用Jekyll托管在GitHub上的静态网站。问题是，我真的不需要master分支，因为存储库唯一包含的是网站。这样我就必须gitcheckoutgh-pages，然后gitmergemaster，然后gitpushorigingh-pages。有什么简单的方法可以摆脱gh-pages分支并直接从master推送？ 最佳答案 Theproblemis,Idon'treallyneedthemasterbranch,astheonlythingtherepositorycontainsisthewebsite.Isthere

随机推荐