打开/关闭按钮以显示/隐藏内容

on/off button to show/hide content

本文关键字：隐藏 关闭按钮 打开 显示      更新时间：2023-09-26

我们在餐厅网站和菜单页面上使用WordPress，我们希望为用户提供在菜单菜肴旁边显示过敏原指南的选项。过敏原键显示在每道菜的下面，并被包裹在一个名为.a过敏原的div中

我们的目标是有一个打开/关闭按钮，可以显示/隐藏.a过敏原类，这可能吗？我在这里看过其他解决方案，但似乎没有一个符合我的目的，

非常感谢

Nat

编辑

为了让它更清晰，并提供更多的背景知识，我目前正在学习诀窍，我对CSS和HTML有很好的了解，但没有使用Javascript的经验。

简单来说，我需要能够用CSS按钮甚至单选按钮隐藏或显示div类。我试图使用CSS来实现这一点，但我很快意识到唯一的解决方案是使用一些Javascript代码。

在下面的屏幕截图中，我会将这些彩色框（过敏原键）包装在一个带有类名（过敏原）的div中，然后页面顶部的一个或多个单选按钮会显示/隐藏该div。

带有过敏原键的菜单截图

我希望这是有道理的。

这是可能的，但您必须小心该按钮的其他本地WP事件

如果您使用jQuery：

$('#btn').click(function() {
    $('#DIV').toggle();
});

纯JavaScript：

function visibility() {
       var e = document.getElementById("DIV");
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
   }

调用按钮点击事件中的函数

您可以使用Jquery one

$(document).ready(function () {
  var togBtn = $('.tog');
  var allergerns = $('.allergerns');
  togBtn.one('click', hideAllergerns);
  function hideAllergerns() {
    allergerns.fadeOut();
    togBtn.one('click', showAllergerns);
  }
  function showAllergerns() {
    allergerns.fadeIn();
    togBtn.one('click', hideAllergerns);
  }
});
.allergerns {
  width: 100px;
  height: 100px;
  background-color: #4aa3df
}
.tog {
  width: 60px;
  height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="allergerns"></div>
<button class="tog">toggle</button>

您对jQuery感到满意吗？因为这正是你所需要的。

基本上，你需要一个带类的按钮。你的按钮（或任何其他类，但只需在脚本中更改它）和你想添加或删除过敏原类的元素也应该有另一个类，它永远都在那里。根据我的代码示例，它应该是"yourclass"

然后，您可以使用此代码并将其添加到footer.php中，或者将其附加为单独的js文件。

<script>
jQuery('.yourbutton').click(function(){
jQuery('.yourclass').toggleClass('allergerns');
});
</script>
相关文章：