toggle 相关问题

在 Toggle 上禁用和禁用 Swift UI 中的复选框

我希望如果用户选中一个复选框，则应禁用另一个复选框，当前用户可以同时选择两者。 我看过一些例子，但在这里我需要将 bool 值放入模态结构中，但请注意

仅加载一次iframe，并通过切换事件隐藏它

我有不同的 iframe，但速度变慢。我希望 iframe 仅在单击按钮时加载。然后使用切换事件隐藏/显示 iframe。 代码示例： $（文档）。</desc> <question vote="0"> <p>我有不同的 iframe，但速度变慢。我希望 iframe 仅在单击按钮时加载。然后使用切换事件隐藏/显示 iframe。 代码示例：</p> <pre><code>&lt;script&gt; $(document).ready(function(){ $(&#34;#button2&#34;).click(function(){ $(&#34;#iframecon&#34;).toggle(); }); }); &lt;/script&gt; &lt;input type=&#34;checkbox&#34; id=&#34;button2&#34; onClick=&#39;document.getElementById(&#34;iframe2&#34;).src=&#34;/page1.php&#34;;&#39;&gt; &lt;div id=&#34;iframecon&#34;&gt; &lt;iframe id=&#34;iframe2&#34; width=&#34;100%&#34; height=&#34;100%&#34;&gt;&lt;/iframe&gt; &lt;/div&gt; </code></pre> <p>我该怎么做？谢谢</p> </question> <answer tick="false" vote="0"> <p>你可以尝试这样的事情：</p> <pre><code> &lt;script&gt; $(document).ready(function(){ $(&#34;#button2&#34;).click(function(){ var iframe = $(&#34;#iframe2&#34;); if (iframe.attr(&#34;src&#34;) === &#34;&#34;) { iframe.attr(&#34;src&#34;, &#34;/page1.php&#34;); } $(&#34;#iframecon&#34;).toggle(); }); }); &lt;/script&gt; &lt;input type=&#34;checkbox&#34; id=&#34;button2&#34;&gt; &lt;div id=&#34;iframecon&#34; style=&#34;display: none;&#34;&gt; &lt;iframe id=&#34;iframe2&#34; src=&#34;&#34; width=&#34;100%&#34; height=&#34;100%&#34;&gt;&lt;/iframe&gt; &lt;/div&gt; </code></pre> <p>检查iframe的src</p> </answer> </body></html>

Toggle 在 React 中如何工作

以下是一个简单的 React Toggle 功能。但我有一个困惑。在第一次单击中，我了解到“setState”函数使“state”变为“true”，以便显示内容。但在...

React，如何一键切换背景颜色？

我尝试在单击后更改每个按钮的背景颜色。问题是，它适用于所有按钮，而不是仅适用于单击的按钮。我想，我应该使用 e，或者 i...

在同一页面上的多个 vue 应用程序之间共享反应式 localStorage 状态

我正在使用 Laravel 和 VueJS 创建一个仪表板，我创建了一个按钮，允许在 Sidebar.vue 组件中放大或缩小我的侧边栏，这是我的组件： 我正在使用 Laravel 和 VueJS 创建一个仪表板，我创建了一个按钮，允许在 Sidebar.vue 组件中放大或缩小我的侧边栏，这是我的组件： <template> <aside :class="`${is_expanded ? 'is-expanded' : ''}`"> <div class="head-aside"> <div class="app-logo"> <i class="bx bxl-trip-advisor"></i> </div> <span class="app-name">CONTROLPANEL</span> </div> <div class="menu-toggle-wrap"> <button class="menu-toggle" @click="ToggleMenu()"> <span class="boxicons"><i class="bx bx-chevrons-right"></i></span> </button> </div> </aside> </template> <script> export default { data() { return { is_expanded: ref(localStorage.getItem('is_expanded') === 'true'), } }, methods: { ToggleMenu() { this.is_expanded = !this.is_expanded localStorage.setItem('is_expanded', this.is_expanded) }, }, } </script> 出现的问题是，在另一个组件中我创建了一个具有固定宽度的导航栏，我想做的是，当我的侧边栏更改大小时，我希望我的导航栏也发生变化，在另一个组件中我只有一个模板带有导航和侧边栏的导入。 你说你正在使用 laravel 和 vue。目前尚不清楚 vue 组件是如何集成的，但我假设 laravel 注入了您想要通信的各个 vue 组件。 （与仅使用 API 与 Laravel 通信的基于 vue 的 SPA 不同） 这两个组件彼此不了解。即使它们都可以访问相同的 localStorage，但它们不知道那里的值何时更新。 有多种方法可以解决这个问题，这是一种方法 在组件外部创建一个响应式对象来管理共享状态 import { ref, computed } from 'vue' const isExpandedRef = ref(localStorage.getItem('is_expanded') === 'true'); window.IS_EXPANDED = computed({ get(){ return isExpandedRef.value }, set(value){ isExpandedRef.value = !!value; localStorage.setItem('is_expanded', isExpandedRef.value); } }) 需要 ref，以便当 isExpandedRef.value 更改时，计算的 getter 会向其侦听器触发通知。 如果在任何组件之前加载它，您将创建一个可用于页面上任何脚本的计算（反应）变量（除了框架和影子 dom） 然后你可以像这样在你的组件中使用。 <template> <aside :class="`${is_expanded ? 'is-expanded' : ''}`"> <div class="head-aside"> <div class="app-logo"> <i class="bx bxl-trip-advisor"></i> </div> <span class="app-name">CONTROLPANEL</span> </div> <div class="menu-toggle-wrap"> <button class="menu-toggle" @click="is_expanded = !is_expanded"> <span class="boxicons"><i class="bx bx-chevrons-right"></i></span> </button> </div> </aside> </template> <script> export default { data() { return { is_expanded: window.IS_EXPANDED, } }, } </script> 因为 is_expanded 是通过 getter 和 setter 进行计算的，您可以直接从模板设置值，或者在方法中使用 this.is_expanded = !this.is_expanded。 如前所述，这依赖于使用全局 window 对象。提出该解决方案是为了其简单性。使用 window 对象有一些缺点，更强大的解决方案将依赖于注入此类共享状态而不是依赖于 window，但它会带来更多开销。 这段代码运行良好 <template> <aside :class="`${is_expanded ? 'is-expanded' : ''}`"> <div class="head-aside"> <div class="app-logo"> <i class="bx bxl-trip-advisor"></i> </div> <span class="app-name">CONTROLPANEL</span> </div> <div class="menu-toggle-wrap"> <button class="menu-toggle" @click="ToggleMenu()"> <span class="boxicons"> <i class="bx bx-chevrons-right"></i>click me </span> </button> </div> </aside> </template> <script> export default { data() { return { is_expanded: localStorage.getItem("is_expanded") === "true", }; }, methods: { ToggleMenu() { this.is_expanded = !this.is_expanded; localStorage.setItem("is_expanded", this.is_expanded); }, }, }; </script> 这里有一个 GIF 显示实际结果：https://share.cleanshot.com/TtKsUj 通过使用 watcher 并将其 deep 属性设置为 true 使本地存储具有反应性 https://vuejs.org/guide/essentials/watchers.html#deep-watchers 或者如果您使用的是 vue2，则使用事件总线 使用 Vue 3 组合 API let isOpen = ref(localStorage.getItem('is_open') === 'true'); const openMenu = () => { isOpen.value = !isOpen.value localStorage.setItem('is_open', isOpen.value); } <aside id="logo-sidebar" :class="isOpen ? 'w-24 collapsed' : 'w-64' ">

Android PopupWindow 防止锚点点击关闭

我有一个弹出窗口，在单击按钮时显示 AsDropDown，并且此弹出窗口具有 setOutsideTouchable(true)，我想在单击按钮时切换显示弹出窗口，但也想在...

React onClick 事件在引导下拉菜单上不起作用

我正在尝试在 React 中实现一个下拉菜单。 位于我的组件的 return() 内部。 我正在尝试在 React 中实现一个下拉菜单。 <Dropdown></Dropdown> 位于我组件的 return() 内部。 <Dropdown> <Dropdown.Toggle className="btn btn-dark"> <i onClick={() => handleToggle()}>{icons['Menu']}</i> </Dropdown.Toggle> <Dropdown.Menu className="nav-container border-secondary-subtle border border-3"> <Dropdown.Item href="#" className="nav-items"> Dashboard </Dropdown.Item> <Dropdown.Item href="#" className="nav-items"> Courses </Dropdown.Item> </Dropdown.Menu> </Dropdown> import { Dropdown } from "react-bootstrap"; import React, { useState } from 'react'; const [showDropdown, setShowDropdown] = useState(false); const handleToggle = () =>{ setShowDropdown(!showDropdown); console.log(showDropdown) } 当前行为：单击“菜单”图标时，“Dropdown.Menu”选项可见。但再次单击菜单图标时，它不会被隐藏。 我尝试将 onClick 设置为 Dropdown.Toggle 和 Dropdown。两者都不工作。但在控制台中，我可以看到每次单击时 showDropdown 翻转的值。 我也在 onClick = {()=>setShowDropdown(!showDropdown)} 中尝试过这个 我在一些示例中看到他们没有使用任何事件监听器，但这对我也有用。 此外，我希望单击任何菜单项后菜单不可见。 如有任何帮助，我们将不胜感激。谢谢你。 我解决了这个问题。我在班级中添加了一个display:blocknav-container。删除此选项后，下拉列表可以按预期工作，无需任何侦听器。

是否可以在不同的 qlik sense 主题之间切换以使应用程序对色盲更友好？

我们的 Qlik 应用程序有许多色盲用户，因此我想让他们更容易使用。我正在寻找最简单的方法来在色盲友好的颜色之间切换......

如何避免切换视图递归onChange调用SwiftUI

HStack{ ForEach($rs.newsCategoryCollection){ $类别中 切换（category.id，isOn：$category.isSelected） .toggleStyle(.button) .onChange(of:category.isSelected) {值在 ...

如何避免递归 onChange 调用 SwiftUI

HStack{ ForEach($rs.newsCategoryCollection){ $类别中 切换（category.id，isOn：$category.isSelected） .toggleStyle(.button) .onChange(of:category.isSelected) {值在 ...

如何修复 SwiftUI 中的切换定位

我目前正在学习 Swift 的过程中，遇到了一些奇怪的事情。我在此示例中的目的是让两个文本编辑器和切换器水平对齐，但是在

元素具有 `checked` 属性但未被选中？

我正在使用 ThreeDubMedia 的拖放选择功能来选中和取消选中几个复选框。它会检查和取消检查一次，但仅此而已。更重要的是，当我看着 elem...

如何在普通 javascript 的 if 条件中定位此按钮

我有几个具有相同类的按钮可以切换下拉列表，如果用户单击按钮外部的某个位置，则列表将关闭，但如果用户单击具有相同类别的另一个按钮...

单击将 a) 滚动到 div，b) 打开所述 div，c) 将 html 从另一个页面加载到该 div 中。怎么办？

我已经有了“滚动到”和切换功能： $("a.view").click(function(){ $("#content").slideToggle("慢"); 返回假； }); 滚动是通过这个来处理的

如何使 jquery 切换工作

我有一个简单的两个div： 菜单 我想单击 div#tic 来上下切换 div#slide_menu。 我正在尝试...

切换下一个元素（jQuery）

HTML： 采访 这是问题1？ 这是一个答案！ HTML： <div class="interview"> <h4>Interview</h4> <a href="#" class="question">This is question 1?</a> <div class="answer">This is an answer!</div> <a href="#" class="question">This is question 2?</a> <div class="answer">This is an answer!</div> <a href="#" class="question">This is question 3?</a> <div class="answer">This is an answer!</div> </div> jQuery： if ($('interview')[0]) { $('interview .question').toggle(function () { $(this).next('.answer').slideIn(); }, function () { $(this).next('.answer').slideOut(); }); } ...我不明白为什么它不起作用。 注意点： .interview 另外，没有slideIn，请尝试slideDown和slideUp：http://jsbin.com/ajawo3 如果这些函数中没有任何其他代码，更好的选择是slideToggle：http://api.jquery.com/slideToggle/ 您正在使用类选择器，它应该以 . 开头 所以你必须改变 $('interview .question') 到 $('div.interview .question') 这是一个简单的版本... $('a.question').click(function () { $(this).next('.answer').slideToggle(); });

如何使用 mantine 框架一次仅切换一行并做出反应

我一直在开发一个简单的表格，用户可以单击每一行并将其展开。 我已经使用切换使其工作，当前切换正在工作，但问题是所有行

切换按钮未在切换组（Unity）中传递

我陷入了一个有点令人困惑的问题。我在包含切换组脚本的空游戏对象下使用切换按钮。当我将此组放置在 Canvas 中的面板下时，

按钮 X 用于在单击并打开时关闭下拉切换菜单

我设法创建了一个响应式菜单，在一定的分辨率下它会变成带有汉堡包图标的切换菜单，问题是带有汉堡包图标的切换菜单在 1205 px 和 t 之后出现......

CSFML - 切换输入问题

所以我试图自己制作一个完整的游戏，并且我进入了制作库存的部分。我想在 E 键上进行切换输入以打开库存，但是当我在游戏中尝试该功能时...