toggle 相关问题

我正在使用选项卡来显示清晰的内容，但其中一个选项卡停止下载，因为它位于数据切换选项卡中。这是一张传单地图。这是代码：导航栏代码：我正在使用选项卡来显示清晰的内容，但其中一个选项卡停止下载，因为它位于数据切换选项卡中。这是一张传单地图。这是代码：导航栏代码： <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li> <li><a data-toggle="tab" href="#carte">Carte</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active">Lorem ipsum</div> <div id="carte" class="tab-pane fade"> **//see script below\\** </div> </div> 脚本： <div id="carteBenef"></div> <script type="text/javascript"> $(document).ready(function () { var map = new L.Map('carteBenef'); var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', subDomains = ['otile1', 'otile2', 'otile3', 'otile4'], cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>'; var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains}); var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>) map.addLayer(cloudmade).setView(iades, 15); var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>); var benef = new L.Marker(benefLocation); map.addLayer(benef); benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup(); }); </script> 地图在我将其放入选项卡之前就已经出现了，有人知道为什么它现在不起作用吗？如果您的 Leaflet 地图在调整浏览器窗口大小后突然正常工作，那么您会遇到经典的“地图初始化时地图容器大小无效”：为了正常工作，Leaflet 会在初始化时读取地图容器大小地图(L.map("mapContainerId"))。如果您的应用程序隐藏该容器（通常通过 CSS display: none;，或某些框架选项卡/模态/其他......）或稍后更改其尺寸，Leaflet 将不会知道新的尺寸。因此它不会正确渲染。通常，它仅下载它认为显示的容器部分的图块。如果容器在地图初始化时完全隐藏，则这可以是左上角的单个图块。将地图容器嵌入“选项卡”或“模态”面板时经常会出现此错误，可能使用流行的框架（Bootstrap、Angular、Ionic 等）。 Leaflet 监听浏览器窗口大小调整事件，并在事件发生时再次读取容器大小。这解释了为什么地图突然在调整窗口大小时起作用。您还可以在显示选项卡面板时通过调用 map.invalidateSize() 来手动触发此更新（例如，在选项卡按钮单击上添加侦听器），至少在第一次以正确的尺寸渲染容器时是如此。至于实现选项卡按钮单击侦听器，请对该主题执行新的搜索：对于大多数流行的框架，您应该有足够的可用资源。首先，感谢@ghybs 对为什么在这些情况下传单地图未正确显示的良好解释。对于那些尝试@ghybs的答案失败的人，您应该尝试调整浏览器的大小，而不是调用地图对象的方法： window.dispatchEvent(new Event('resize')); 正如@MarsAndBack所说，此修复可能会导致Leaflet的invalidateSize提供的平移/动画/等功能出现问题。我遇到这个问题是因为我使用了modal bootstarp。无论如何它都没有解决。我尝试了 map.invalidateSize() 和 window.dispatchEvent(new Event('resize')); 但没有修复。最终解决了这个问题： $('#map-modal').on('shown.bs.modal', function(event) {}); 'shown.bs.modal'事件意味着当模态完全加载并且大小没有任何混淆时，现在在其中编写您的代码。对于像我这样的人，无法通过珍贵的@ghybs 解释（map.invalidateSize()）解决这一挑战，并且能够通过@gangai-johann 来解决这一挑战，您仍然有机会以正确的方式做到这一点。将无效指令放入 setTimeout 内，因为分派该指令可能为时过早。 setTimeout(() => { this.$refs.mymap.mapObject.invalidateSize() }, 100) 请参阅 https://stackoverflow.com/a/56364130/4537054 答案以获取详细说明。

javascript twitter-bootstrap tabs toggle leaflet

回答 4 投票 0

点击 <details>（不是 <summary>）关闭“披露声明”？

按照此处显示的简单示例，：详细信息披露元素 [Mozilla.org]，如何单击“详细信息”来折叠这些详细信息？例如，在动画中... 按照此处显示的简单示例，：详细信息披露元素 [Mozilla.org]，如何单击“详细信息”来折叠这些详细信息？例如，在动画 GIF 中，上部下方是“摘要”，单击时会切换“详细信息”（如下）。在某些情况下，这些细节会很长；我希望能够单击此处，折叠这些详细信息（而不是向上滚动到“摘要”部分）。我通过 Ajax 生成 HTML 页面，因此 Ajax/JQuery 解决方案可能就是我想要的。这是相关部分。 (function ($) { if (snippets_arr.length > 2) { fq_snippet += '<details><summary>' + snippets_arr.slice(0,2).join('<br/>'); fq_snippet += '<br/>[toggle]</summary>' + snippets_arr.slice(2,).join('<br/>') + '</details>'; } else { fq_snippet += snippets_arr.join('<br/>'); } // Addendum: the solution involved this part of that file: init: function () { // add code here ... }); }); } })(jQuery); 更新1：在与@a.mola 的代码聊天后解决了。单击“摘要”（顶部）可打开/关闭“详细信息”视图（底部）。新功能：单击“详细信息”（当然是打开时）会折叠“详细信息”视图。这适用于页面上的所有（即多个）“详细信息/摘要”元素。更新2 我修改了代码以在折叠该部分后记住并返回到滚动位置。 var scrollPosition = null; /* REMEMBER, SET SCROLL POSITION * * Here I implemented a scroll position ["scrollPosition = $(window).scrollTop(); ..."] addition * to my "<details>" code, so that when you collapse a long <details> section you return to the * original <summary> position. * * https://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery * https://stackoverflow.com/questions/10836428/how-to-maintain-page-scroll-position-after-a-jquery-event-is-carried-out/10836745 * https://stackoverflow.com/questions/32573532/jquery-how-to-return-to-the-exact-same-scroll-position-when-going-back-to-previ */ $(document).click(function(event) { /* ORIGINALLY (per StackOverflow discussion with user a.mola -- referenced above): * * if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) event.target.removeAttribute('open'); * * Modified to following, to allow use of "scrollPosition" to reset scroll position * when collapsing long <details> sections. */ // if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('closed')) { if (event.target.tagName == 'SUMMARY') { // SAVE THE CURRENT SCROLL POSITION: scrollPosition = $(window).scrollTop(); // console.log('[summary click] scrollPosition', scrollPosition, '| type:', typeof scrollPosition) // ---------------------------------------- /* NOTE: "return" here exits this AND following if statement: */ // return scrollPosition; } /* if (event.target.tagName == 'SUMMARY') {} */ if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) { scrollPosition = scrollPosition; // ---------------------------------------- /* COLLAPSE <details> ELEMENT BY CLICKING ON THAT [<details>] ELEMENT: * Per user a.mola: * https://stackoverflow.com/questions/66609261/click-on-details-not-summary-to-close-disclosure-statement/66609543#66609543 */ event.target.removeAttribute('open'); // ---------------------------------------- // SET THE SCROLL POSITION FROM STORED SESSION VALUE: $(window).scrollTop(scrollPosition); } /* if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) {} */ }); /* $(document).click(function(event) {} */ 每当单击/触摸 <summary></summary> 标签时，都会在 <details></details> 标签上设置 open 属性以公开额外的内容。只需切换 <details></details> 标签上的属性即可实现您需要的功能。 (function($) { // ... $(document).click(function(event) { if (event.target.tagName == 'DETAILS' && event.target.hasAttribute('open')) event.target.removeAttribute('open'); }); })(jQuery); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <details> <summary>Details</summary> Something small enough to escape casual notice. </details> 我认为比 a.mola 答案稍好一点的是仅选择“详细信息”元素，而不是测试每个元素的点击...... (function($) { // ... $('details').click(function(event) { if (event.target.hasAttribute('open')) event.target.removeAttribute('open'); }); })(jQuery); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <details> <summary>Details</summary> Something small enough to escape casual notice. </details> <p>other tags are not test for clicking</p> 顺便说一句，我找到了一种完全不需要 javaScript 的黑客解决方案:) 此黑客的另一个优点是您还可以修改打开/关闭案例的摘要文本。我用它来删除文本“点击查看详细信息” 基本上，您将所有文本放入 summary 标签中。然后为关闭细节可见的文本添加一个类以及另一个对于打开的详细信息应可见的文本类。然后使用 CSS 选择器 details[open] 和 details:not([open]) 以及您的打开/关闭类并使用 display:none。 details[open] > summary .summaryOpen { color: green; } details[open] > summary .summaryClose { display:none; } details:not([open]) > summary .summaryOpen{ display:none; } details:not([open]) > summary .summaryClose { color:red; } <details> <summary> <span class="summaryClose">Summary ...(click for details)...</span> <span class="summaryOpen">Summary text text text</span> <p class="summaryOpen">details which are also in summary section... but not visible for closed details...</p> </summary> </details>

html toggle

回答 3 投票 0

为动态生成的按钮创建“切换”功能

我正在创建一个使用 tkinter 查看元数据的工具。其用户将查看当前与多个数据集关联的元数据，并权衡元数据是否适合

python-3.x function tkinter toggle tkinter-button

回答 1 投票 0

如何使用链接元素显示或隐藏 JavaScript/jQuery 中的特定内容？

我对 JavaScript/jQuery 有一个非常具体的需求，但我找不到完美的解决方案，总是有一个我无法满足的标准。以下是情况摘要：我各有 3 个标题...

javascript html jquery css toggle

回答 1 投票 0

toggle 相关问题

最新问题