代码之家 › 专栏 › 技术社区 › HappyHands31

用jQuery显示/隐藏Div

css jquery html javascript

HappyHands31 · 技术社区 · 4 年前

我在用 toggle() 但它不起作用。我的脚本在页脚:

$(document).ready(function(){
   $("product-suggestion-form-container").click(function(){
      $("form-div-top").toggle();
   });
});

或者我也试过了 addClass() :

$(document).ready(function(){
   $("product-suggestion-form-container").click(function(){
      $("form-div-top").addClass("active");  
         // $("form-div-top").toggle();
   });
});

基本上,我只是想在显示和隐藏表单div之间切换。

什么时候? product-suggestion-form-container 点击, form-div-top 应该显示。

什么时候? contact-us-form-container 点击, form-div-bottom 应该显示。

然后,当再次点击这些div时,它们应该隐藏起来。

不应该点击 产品建议表格容器 原因 表单div顶部 变得活跃,从而 display: flex ? 不知道为什么什么都没发生。

我刚刚从 here ,但理想情况下,我想添加一个平滑过渡以及您可能建议的任何其他最佳实践。

$(document).ready(function(){
   $("product-suggestion-form-container").click(function(){
      $("form-div-top").addClass("active");  
         // $("form-div-top").toggle();
   });
});

.form-div-outer {
  margin: 10px 0;
}
.form-div-top,
.form-div-bottom {
  background-color: #f8f7f7;
  border: 1px solid #c6c6c6;
}

/*initial display*/

.form-div-inner-top {
  display: none;
}

.form-div-inner-bottom {
  display: none;
}

.form-div-inner-top:active {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.form-div-inner-bottom:active {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.form-input {
  margin: 10px 0;
  padding: 5px;
  border: none;
  background-color: #ffffff;
  width: 100%;
}

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="form-div-outer">
   <div class="product-suggestion-form-container">
      <span class="form-title">Product Suggestion Form</span>
         <span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
         </span>
   </div>
   <div class="form-div-top">
      <form class="form-div-inner-top">
         <span class="input-group input-group-name">
            <input type="text" placeholder="Name" class="form-input" required></input>
         </span>
         <span class="input-group input-group-email-address">
            <input type="text" placeholder="Email Address" class="form-input" required></input>
         </span>
         <span class="input-group description-of-product-desired">
            <input type="textarea" placeholder="Description of product desired" class="form-input" required></input>
         </span>
      </form>
   </div>
</div>

<div class="form-div-outer">
  <div class="contact-us-form-container">
    <span class="form-title">Contact Us Form</span>
    <span class="dropdown-arrow"><i class="fas fa-caret-down"></i>
    </span>
    </div>
    <div class="form-div-bottom">
    <form class="form-div-inner-bottom">
      <span class="input-group input-group-name">
        <input type="text" placeholder="Name" class="form-input" required></input>
      </span>
      <span class="input-group input-group-email-address">
      <input type="text" placeholder="Email Address" class="form-input" required></input>
      </span>
      <span class="input-group input-group-contact-reason">
      <div class="contact-reason-container">
        <ul class="radiolist">
          <li>
            <input class="radio" type="radio"><label>Order question</label>
            <input class="radio" type="radio"><label>Website feedback</label>
            <input class="radio" type="radio"><label>Trouble finding product</label>
          </li>
        </ul>
      </div>
     </span>
    </form>
  </div>
</div>

0 回复 | 直到 4 年前

Imran Rafiq Rather 4 年前

你好像忘了 . s在代码中访问数据。

$(document).ready(function(){
 $(".product-suggestion-form-container").click(function(){
  $(".form-div-top").toggle();
 });
});