Question

我正在使用prestashop而且我遇到了问题。

我有两个按钮：访客结帐和创建帐户以及类似的表格#opc_account_form。

事情是slideToggle不能正常工作。

1）如果我点击访客结帐，表格会向下滑动，如果我点击访客结账的其他时间，表格会向上滑动（这个没问题）

2）如果我点击创建一个帐户，表格会向下滑动，如果我在创建一个帐户上点击其他时间，表格会向上滑动（这个没问题）

3）问题所在：如果我点击访客结帐，表单会向下滑动，如果我点击创建帐户，表单会向上滑动。通常，它必须向上滑动访客结帐的表格并向下滑动创建一个帐户的表格（我必须点击其他时间）

任何想法，

由于

这里是代码

   $(document).ready(function () {
     $(document).on('click', '#opc_createAccount', function (e) {
         e.preventDefault();
         $('#opc_account_form').slideToggle('slow');


     });
     $(document).on('click', '#opc_guestCheckout', function (e) {
         e.preventDefault();
         $('#opc_account_form').slideToggle('slow');
     });

 });

.unvisible {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="opc_account-group">
    <form id="new_account_form" class="std" autocomplete="on" autofill="on">
        <fieldset>
            <div class="box">
                <div id="opc_account_choice" class="row">
                    <p class="opc-button">
                        <button type="submit" id="opc_guestCheckout"><span>Guest checkout</span>
                        </button>
                    </p>
                    <p class="opc-button">
                        <button type="submit" id="opc_createAccount"><span>Create an account</span>
                        </button>
                    </p>
                    <!-- <h3 id="new_account_title" class="page-subheading"></h3>-->
                </div>
            </div>
            <div id="opc_account_form" class="unvisible">
                <p>here the form</p>

Answer 1

您可能希望拥有2个单独的Div而不使用切换。

点击访客应该调用隐藏创建帐户（如果它显示然后隐藏，如果没有则没有任何变化），然后调用show guest check out div。

创建帐户的点击事件将执行相同的反转，隐藏访客结帐并显示创建帐户

如果有要求，那么按钮点击“切换”他们自己的div然后你可以调用Toggle为他们拥有的div并为其他div隐藏。

以下是原始样本中的一个示例，几个注释

使用向上滑动始终隐藏其他div
嵌入这两个表单会使验证成为PAIN，如果项目可见，请务必切换验证。
我将按钮类型更改为“按钮”，因此他们不会尝试提交表单，也不必阻止默认。但只是一个FYI，你也可以使用

   $(document).ready(function () {
     $(document).on('click', '#opc_createAccount', function (e) {
       //e.preventDefault();
       $('#guest_form').slideUp('slow');
       $('#opc_account_form').slideToggle('slow');
       


     });
     $(document).on('click', '#opc_guestCheckout', function (e) {
        //e.preventDefault();
        $('#opc_account_form').slideUp('slow');
        $('#guest_form').slideToggle('slow');
     });

 });

.unvisible {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <div id="opc_account-group">
    <form id="new_account_form" class="std" autocomplete="on" autofill="on">
        <fieldset>
            <div class="box">
                <div id="opc_account_choice" class="row">
                    <p class="opc-button">
                        <button type="button" id="opc_guestCheckout"><span>Guest checkout</span>
                        </button>
                    </p>
                    <p class="opc-button">
                        <button type="button" id="opc_createAccount"><span>Create an account</span>
                        </button>
                    </p>
                    <!-- <h3 id="new_account_title" class="page-subheading"></h3>-->
                </div>
            </div>
            <div id="opc_account_form" class="unvisible">
                <p>new account form</p>
          </div>
          <div id="guest_form" class="unvisible">
                <p>Guest form</p>
          </div>
      </fieldset>
    </form>
  </div>

我的函数slideToggle（）有问题

1 个答案: