Question

我在div上显示或隐藏。 div内部只是一个简单的形式。目前，当页面加载时，我将其设置为隐藏，直到取消选中该复选框。

setSameAsBilling: function(flag) {
    $('billing:use_for_shipping').checked = flag;
    if (flag) {
        $('co-shipping-form-fields').hide();
        this.syncWithBilling();
    }
    if (!flag) {
        $('co-shipping-form-fields').show();
    }
},

我希望它始终显示表单。我尝试将第一个条件语句设置为.show()。

此外，我试图删除一些样式和/或更改CSS中的样式。目前它看起来像这样：

#co-shipping-form-fields{margin-top:20px}.checkoutStep--billingshipping .guest-show{display:none}.checkoutStep--billingshipping .guest-checkout .guest-hide{display:none}.

我试图将display:block的所有内容更改为display:none。仍无济于事。

完成此任务的正确方法是什么？我应该设置!important还是需要调整js？还有一些涉及ajax，我认为这可能是这里的覆盖问题。

Answer 1

当你的元素需要成为隐藏父元素的子元素时，会出现某种＆＃34;解决方法＆＃34;在您的父元素上使用visibility: hidden，在您要显示的子元素上使用visibility: visible。

快速为您制作一个简单的代码段。忽略javascript，它仅用于按钮：

＆＃13;

hideshow = function() {
  if ($("#parent").css("visibility") === "hidden") {
    $("#parent").css("visibility", "visible");
    $("button")[0].innerHTML = "hide parent";
  } else {
    $("#parent").css("visibility", "hidden");
    $("button")[0].innerHTML = "show parent";
  }
}

＆＃13;

#parent {
  height: 300px;
  width: 700px;
  background-color: green;
  margin: 0 auto;
  display: flex;
  visibility: hidden;
}

#firstchild {
  margin: 20px;
  background-color: red;
  width: 200px;
  height: 100px;
  visibility: visible
}

#secondchild {
  margin: 20px;
  background-color: blue;
  width: 200px;
  height: 100px;
}

code {
  color: white;
  padding: 10px;
  font-weight: 700;
}

button {
  margin: 0 10;
  display: block;
  font-size: 32px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="hideshow()">show parent</button>

<div id="parent">
  <div id="firstchild">
    <code>visible4ever!</code>
  </div>
  <div id="secondchild">
    <code>take me with you, parent!</code>
  </div>
</div>

＆＃13;

但display: none和visibility: hidden之间存在很大差异。将display设置为none将完全隐藏元素，而visibility: hidden也会＆＃34;隐藏＆＃34;它，但不会阻止仍然占据它空间的元素。由于我不知道您的表单元素及其周围的元素如何以及它们的布局如何，我不知道这种差异是否会对您的网站产生任何影响以及您希望它如何。试试看！

<小时/> 但是，作为Taplar already pointed out，移动元素使其不是您要隐藏的父级的后代，可能是最好的＆＃34;办法。 position: absolute以及top和left属性可以帮助您解决此问题。

另一种方法当然是让父母单独离开，除了要用display: none显示的孩子外，隐藏其中的每个孩子。这对于您想要隐藏的一个或两个孩子来说很容易，但是开始会让您父母拥有的孩子越来越沮丧。还要记住，使用这种方法，父本身并不隐藏。如果它有任何background-color或border，即使您隐藏其中的每个孩子，也会显示它们。

<小时/> 另请查看this answer类似的问题。

JavaScript显示和隐藏技巧

1 个答案: