Question

我做了一个开关，可以在两种联系方式之间切换。每次使用按钮时，第二种形式都会跳转。在这里看看：

这是我的js：

$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
    $("#mail-form, #phone-form").fadeToggle();
});

这是我的HTML：

    <div class="div_switch">
      <label>
        <h1 class="switch_text">Email</h1>
      </label>
      <label class="switch">
        <input name="checkbox" type="checkbox" value="checkbox">
        <span class="slider round"></span>
      </label>
      <label>
        <h1 class="switch_text">Rückruf</h1>
      </label>
    </div>
    <div id="mail-form" class="mail-form">
      <form class="" action="index.html" method="post">
        <div class="contact-selector">
        </div>
        <div class="form-row">
          <div class="input-group col-md">
            <div class="input-group-prepend">
              <div class="input-group-text"><i class="fas fa-signature"></i></div>
            </div>
            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
          </div>
          <div class="input-group col-md">
            <div class="input-group-prepend">
              <div class="input-group-text"><i class="fas fa-envelope"></i></div>
            </div>
            <input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col">
            <label for="exampleFormControlTextarea1"></label>
            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Deine Nachricht..."></textarea>
          </div>
        </div>
        <div class="email-btn-holder">
          <button type="submit" class="reshape_btn email-submit">Senden</button>
        </div>
      </form>
    </div>


    <div id="phone-form" class="phone-form">
      <form class="" action="index.html" method="post">
        <div class="contact-selector">
        </div>
        <div class="form-row">
          <div class="input-group col-md">
            <div class="input-group-prepend">
              <div class="input-group-text"><i class="fas fa-signature"></i></div>
            </div>
            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
          </div>
          <div class="input-group col-md">
            <div class="input-group-prepend">
              <div class="input-group-text"><i class="fas fa-envelope"></i></div>
            </div>
            <input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
          </div>
        </div>
        <div class="email-btn-holder">
          <button type="submit" class="reshape_btn email-submit">Senden <span><i class="fas fa-arrow-right"></i></span></button>
        </div>
      </form>
    </div>

我尝试了几件事。将父div的显示设置为绝对和我在网上发现的其他CSS东西，但记不清了。但是没有任何帮助。

我非常感谢您的帮助。

提前谢谢！

Answer 1

您应该分离两种形式，并在自己的fadetoggle函数上设置一个回调（有一个完成事件，请帮忙使用它）。尝试类似的东西：

    $("#phone-form").hide();
    $("input[name=checkbox]").click(function(){
        if($("#mail-form").is(':visible')){
            $("#mail-form").fadeToggle(function(){
                $("#phone-form").fadeToggle();
            });
        } else {
            $("#phone-form").fadeToggle(function(){
                $("#mail-form").fadeToggle();
            });
        }
    });

另外，请查看api： http://api.jquery.com/fadetoggle/

Answer 2

我会接受@MauricioCárdenas的回答，但是如果您必须同时使它们褪色，则可以执行以下操作：

<style>
    #parentDiv{position:relative}
    #mail-form, #phone-form{position:absolute;top:0}
</style>

<div ID="parentDiv">
    <div id="mail-form" class="mail-form">
      //Your form code
    </div>

    <div id="phone-form" class="phone-form">
      //Your form code
    </div>
</div>

这会将两种形式都设置为绝对形式，并将它们放置在同一位置。将父级div集添加到相对对象可确保窗体位置不会由主体设置。

jQuery FadeToggle上下跳跃

2 个答案: