Question

我尝试使用按钮来切换两个div的可见性。

参见＆＃34;按场合购物＆＃34;和＆＃34;按收件人购买＆＃34; here

网站是带有_strap（下划线+引导程序）的Wordpress

按钮：

<div><button data-toggle="#form_occ">Shop by Occasion</button> or <button data-toggle="#form_per">Shop by Recipient</button></div>

jQuery（WP）

 jQuery("button[data-toggle]").click(function() {
  var selector = jQuery(this).data("toggle");  // get corresponding element
  jQuery("div").hide();
  jQuery(selector).show();
});

我想也许bootstrap中的元素可能是一个问题，但使用或作为click（）元素会发生相同的空白页。

This是我模仿的小提琴

THE FIX：

我使用了相同的标记和代码，但是我没有隐藏所有div（duh！），而是添加了一个类来隔离我想要显示/隐藏的两个div。

<div id="form_occ" class="form"><!--occasion form-->
<div id="form_occ" class="form"><!--occasion form-->

jQuery("button[data-toggle]").click(function() {
  var selector = jQuery(this).data("toggle");  // get corresponding element
  jQuery("div.form").hide();
  jQuery(selector).show();
});

如果有人在这个答案中找到了价值，那么如何投票我的问题呢！

Answer 1

st-scroll隐藏页面上的每个div，实质上使整个页面“空白”。 jQuery("div").hide();会显示您要展示的部分，除非您刚刚让其父母隐身。 jQuery(selector).show();显示了更多的页面，但我怀疑这是你真正想要的。你真的只想隐藏应隐藏的位，而不是整个页面。

Answer 2

您隐藏了所有div元素，其中一些元素是您要显示的所选div的父元素。考虑这种方法：只隐藏相反的div元素：

<div><button data-toggle="#form_per">Shop by Occasion</button> or <button data-toggle="#form_occ">Shop by Recipient</button></div>

jQuery("button[data-toggle]").click(function() {
   var selector = jQuery(this).data("toggle");  // get corresponding element
   jQuery(selector).hide();
});

修改要显示其他div元素，只需将两个data-toggle元素的button属性更改为data-hide-element，然后添加另一个data-show-element属性：

<div><button data-hide-element="#form_per" data-show-element="#form_occ">Shop by Occasion</button> or <button data-hide-element="#form_occ" data-show-element="#form_per">Shop by Recipient</button></div>

然后将您的JS代码更改为：

jQuery("button[data-show-element]").click(function() { var button = jQuery(this); var showElementSelector = button.data("showElement"); var hideElementSelector = button.data("hideElement"); jQuery(showElementSelector).show(); jQuery(hideElementSelector).hide(); });

Answer 3

jQuery（＆＃39; div＆＃39;）。hide（）;是否隐藏了页面上的所有内容。你需要做的是只隐藏另一个div。我做了一个小小的补充，应该做到这一点。但是，请记住，这并不像应该的那样干净，因为它只依赖于两个按钮。

jQuery("button[data-toggle]").click(function() {
  var selector = jQuery(this).data('toggle');  // get corresponding element
  var other = jQuery(this).siblings('button').data('toggle');
  jQuery(other).hide();
  jQuery(selector).show();
});

Answer 4

首先，你隐藏了整个容器。这是一个工作模式。

$("button[data-toggle]").click(function() {
  $(".shopBy").toggle();
});

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<div>
  <button data-toggle="#form_occ">Shop by Occasion</button> 
  or 
  <button data-toggle="#form_per">Shop by Recipient</button>
</div>
<div class="shopBy"><h2>Shopping by Occassion</h2></div><div class="shopBy ui-helper-hidden"><h2>Shopping by Recipient</h2></div>

jquery click（）加载空白页面

4 个答案: