Question

我们正在为我们的餐厅网站使用WordPress，对于我们的菜单页面，我们希望为用户提供在菜单菜单旁边显示过敏原指南的选项。过敏原钥匙显示在每个菜肴下面，并包裹在一个名为.allergens

的div中

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

非常感谢

纳特

修改的

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

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

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

Menu screenshot with allergen keys

我希望这是有道理的。

Answer 1

这是可能的，但您必须小心该按钮的其他本机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';
   }

在按钮点击事件中调用该功能

Answer 2

您可以使用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>

Answer 3

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

基本上你需要一个带有.yourbutton类的按钮（或任何其他类，但只是在脚本中更改它），你要添加或删除过敏原类的元素也应该有另一个类总是在那里。从我的代码示例中，它应该是“yourclass”

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

<script>
jQuery('.yourbutton').click(function(){

jQuery('.yourclass').toggleClass('allergerns');

});
</script>

开/关按钮显示/隐藏内容

3 个答案: