toggle 相关问题

使用 vanilla javascript 关闭点击时打开的选项卡

我一直在尝试构建一个选项卡系统，其中选项卡在单击时关闭。当我尝试关闭打开的选项卡时，它仍然保持打开状态。 基本上，当我单击选项卡时，选项卡会打开，当我单击...

togglePages 函数返回 null

我将在 TogglePage 类中的所有文件中列出该函数的实现。请看一下： 切换页面.dart 导入“包：flutter/material.dart”； 导入'包...

在 html 表格中切换显示/隐藏 div

我需要能够单击其中一个单元格中的图像来显示查询生成的详细信息表。下面是代码的一个小示例。如果div的显示为什么显示第二行...

如何使用Javascript隐藏和显示单击时的div，并考虑到它在可见时不会移动所有内容

我设法使用以下 Javascript 代码隐藏和显示 div： 函数 myFunction() { var x = document.getElementById("menudesplegable"); if (x.style.disp...</desc> <question vote="1"> <p>我设法使用以下 Javascript 代码隐藏和显示 div：</p> <pre><code>&lt;script&gt; function myFunction() { var x = document.getElementById(&#34;menudesplegable&#34;); if (x.style.display === &#34;none&#34;) { x.style.display = &#34;block&#34;; } else { x.style.display = &#34;none&#34;; } } &lt;/script&gt; </code></pre> <p>我面临的问题是，当元素不可见时，它不占用任何空间，但当元素可见时，它将所有其他内容向下移动。这是一个菜单切换，所以我需要所有其他内容都位于同一位置，并且该 div 显示在顶部。可以吗？</p> </question> <answer tick="false" vote="0"> <p>我从你的问题中了解到的是。您希望菜单内容叠加而不是向下推内容。为此，您必须对设计进行更改。使内容相对并给它 z 索引 1。这是给你的 CSS 片段。</p> <pre><code>&lt;style&gt; /* Styling for the menu button */ #menuButton { position: relative; z-index: 1; } /* Styling for the menu */ #menudesplegable { display: none; position: absolute; top: 0; left: 0; background-color: #f0f0f0; padding: 10px; z-index: 2; } &lt;/style&gt; </code></pre> <p>这里是 div 内容以供更多理解。</p> <pre><code>&lt;button id=&#34;menuButton&#34; onclick=&#34;myFunction()&#34;&gt;Toggle Menu&lt;/button&gt; &lt;div id=&#34;menudesplegable&#34;&gt; &lt;!-- Your menu content goes here --&gt; &lt;/div&gt; </code></pre> <p>并维持您的功能！没关系，不需要改变。</p> </answer> <answer tick="false" vote="0"> <p>您还可以使用 CSS 动画，如下所示：</p> <pre><code>@keyframes messagebox-succeded-animation </code></pre> <p>{</p> <pre><code>0% { opacity: 1; display: block; } 80% {opacity: 1;} 100% { opacity: 0; display: hidden; } </code></pre> <p>}</p> </answer> </body></html>

有没有办法在打开工作簿/工作表后立即自动转到代码视图 (alt-f11)？

想绕过工作表打开，也想绕过用户窗体对象，不想执行用户窗体代码，只想立即直接进入指定用户窗体的代码视图。任何人...

Filament php 切换

如何使用toogle将数据（0 1）插入数据库？ 谷歌了两天也没找到这个问题的答案。 Toggle::make('is_active') 我写了上面的代码，但它不起作用。它有效...

使用ahk像素搜索来触发热键

使用带有鼠标移动/单击的像素搜索没有问题。输入发送热键命令，它会完全忽略作为触发器的像素搜索。这是我到目前为止... 环形 { 像素搜索，...

Alpine.js 的不同状态取决于屏幕大小

我需要 x-on:mouseenter="itemActive = {{ index }}" 和 x-on:mouseleave="itemActive = false" 状态为 x-on:click="itemActive = {{ index }} " 和 x-on:click.away=...

在 React 中，我如何在 React 中一次仅切换 1 个元素以呈现 onClick 并隐藏其他元素直到被点击？

单击图像时，我让它旋转并切换问题的答案，但所有 Q/A 对显示全部或不显示 onClick。我如何让被点击的人一次只显示一个答案？ 有趣...

在 React 中 - 我可以为同一组件使用多个 onClick 事件吗？

我想使用 onClick= {setToggle} 和 {handleRotate} 切换和旋转图像。看来我只能渲染一个或另一个 功能常见问题解答（）{ 函数 useToggle(initialState) { ...

为什么两个几乎相同的切换函数中只有一个会真正改变属性的状态？

我先写了 ToggleDisplayMenu，它工作得很好。 我尝试以完全相同的方式编写 ToggleMelkesjef 和 ToggleOrdenselev，但它们不起作用。 他们确实会在各自的按钮 c 上被调用...

Angular 5 Material mat-sidenav 切换不工作

我正在尝试使用官方打开/关闭示例让 sidenav 工作。 我是 Angular 的新手，所以我不确定一切应该如何工作，但到目前为止，对于其他组件我一直很好......

标题切换消失点击

尝试使打开/关闭内容的切换工作。打开内容有效，但带有标题的按钮不知何故消失了。为什么？ 常量显示=参考（假）； <

如何从隐藏的 div 切换全屏？

我有一个按钮可以在 div 全屏中打开文档，问题是我希望 div 在全屏显示之前被隐藏。 如果我真的隐藏了 div，我就看不到我的内容（...

带参数的切换静音按钮

我正在尝试制作一堆切换静音按钮。为了防止我自己编写一堆做同样事情的函数，我使用了参数，我认为这就是代码混乱的地方。给我的

在 SwiftUI 中更改 Toggle 的缩略图颜色

UISwitch(UIKit)中有thumbTintColor属性。 SwiftUI Toggle 中这个属性的等价物是什么？

如何定位 prism.js 脚本中包含的代码？

我使用 prism.js 来显示一段代码。我希望能够显示这段代码的视觉呈现。所以我创建了一个按钮，从代码转到渲染，就在 div 下方，空到

当另一个 ExpansionTile 被点击时关闭一个 ExpansionTile

我在抽屉中有一个 ExpansionTile 列表和一个 ListTile 列表。我想要实现的是，当我按下一个 ExpansionTile 时，另一个 ExpansionTile 必须折叠。我一直坚持这个

单击按钮时更改字体真棒图标

我正在使用此代码播放/暂停背景音频。 我正在使用此代码播放/暂停背景音频。 <div class="music-box"> <audio id="losAudio" src="images/honcayeu.mp3"></audio> <button id="btn_playPause"> <i class="fa fa-music"></i> </button> </div> var losAudio = document.getElementById("losAudio"); function losAudio_playPause() { var isPaused = losAudio.paused; losAudio[isPaused ? "play" : "pause"](); } document.getElementById("btn_playPause").addEventListener("click", losAudio_playPause); 但现在我想要点击按钮时，图标将更改为 fa-pause 图标。 可以告诉我一个简单的解决方案吗？谢谢 要在播放音频时将按钮图标从 fa-music 更改为 fa-pause，您可以修改 losAudio_playPause 函数以相应地更新按钮图标。 试试这个： var losAudio = document.getElementById("losAudio"); var playPauseButton = document.getElementById("btn_playPause"); function losAudio_playPause() { var isPaused = losAudio.paused; losAudio[isPaused ? "play" : "pause"](); playPauseButton.innerHTML = '<i class="fa ' + (isPaused ? 'fa-music' : 'fa-pause') + '"></i>'; } playPauseButton.addEventListener("click", losAudio_playPause); 它的作用是检查音频当前是暂停还是正在播放，并使用三元运算符分别将按钮图标设置为 fa-music 或 fa-pause。然后使用 innerHTML 属性用新图标更新按钮的内容。 你需要在你的函数中做一个动作。尝试获取元素（添加ID）并更改第i个元素的类 您可以使用classList、add()和remove()： let pause = true; document.getElementById("btn_playPause").addEventListener("click", () => { let icon = document.querySelector("i"); if (pause) { icon.classList.add("fa-pause"); icon.classList.remove("fa-music"); pause = false; } else { icon.classList.add("fa-music"); icon.classList.remove("fa-pause"); pause = true; } }); 第二种方式是你可以使用className： document.querySelector("i").className = `fa ${pause ? "fa-pause" : "fa-music"}`; // Get references to the DOM elements we need const losAudio = document.getElementById("losAudio"); const playPauseButton = document.getElementById("btn_playPause"); const playIcon = playPauseButton.querySelector("i.fa-music"); // Create the pause icon element and add the appropriate CSS classes const pauseIcon = document.createElement("i"); pauseIcon.classList.add("fa", "fa-pause"); // Define a function to update the play/pause icon based on the current state of the audio player const updatePlayPauseIcon = () => { // If the audio is paused, remove the pause icon and restore the play icon if (losAudio.paused) { playIcon.classList.remove("fa-pause"); playPauseButton.removeChild(pauseIcon); } // Otherwise, add the pause icon to the button else { playIcon.classList.add("fa-pause"); playPauseButton.appendChild(pauseIcon); } }; // Define a function to toggle the audio player between play and pause const togglePlayPause = () => { // Call the play() or pause() method on the audio player depending on its current state, // and then update the play/pause icon losAudio[losAudio.paused ? "play" : "pause"](); updatePlayPauseIcon(); }; // Attach the togglePlayPause function to the click event of the play/pause button playPauseButton.addEventListener("click", togglePlayPause); <!-- HTML markup for the music player --> <div class="music-box"> <audio id="losAudio" src="images/honcayeu.mp3"></audio> <button id="btn_playPause"> <i class="fa fa-music"></i> </button> </div> 您可以通过更改按钮内图标元素的类来更新按钮的图标。这是您的代码的更新版本，它在播放音频时将图标更改为“fa-pause”，在暂停时将图标更改为“fa-music” updatePlayPauseIcon 函数检查音频是否暂停，并相应地通过添加或删除“fa-pause”类以及附加或删除暂停图标元素来更新按钮的图标。 losAudio_playPause 函数在播放或暂停音频后调用 updatePlayPauseIcon。

如何在再次单击切换按钮后取消选择它？

这段代码的结果是上面的gif，所以我可以选择它，但是要取消选择它，我必须选择另一个按钮！ 意思是，我不希望在选择另一个按钮后取消选择