Question

这是关于菜单上的“Contato”项目。单击它时，它会切换高度弹出和向下弹出div。工作良好。另外，我想放一个“X”按钮。

问题是：当我点击“Contato”时，它会弹出。我点击X然后弹出。但是，如果我再次单击“Contato”，它只有在我执行两次时才有效。

你们对我如何改善糟糕的jQuery以解决这个问题有什么想法吗？

<section id="contato">
            <article id="info">
                <p>21 8668 1419</p>
                <p>22 7836 4351</p>
                <p>87*146596</p>
                <a href="mailto:artfalcao@gmail.com" title="E-mail para contato" target="_blank">artfalcao@gmail.com</a>
            </article>
            <div class="contato">
                <span class="close">X</span>
                <?php echo do_shortcode("[si-contact-form form='1']"); ?>
            </div>
        </section>

        <script>
            jQuery("#menu-item-21 a").click(function () {
                jQuery(this).toggleClass("black");
            });
            jQuery("#menu-item-21").toggle(function(){
                jQuery("#contato").animate({height:375},600);
                jQuery("#info").animate({height:0},700);},
                function(){
                jQuery("#contato").animate({height:150},600);
                jQuery("#info").animate({height:115},700);
            });

        </script>
        <script>
            jQuery(".close").click(function () {
                jQuery('#contato').animate({height:150},700);
                jQuery("#info").animate({height:115},700);
            });
            jQuery("#menu-item-21 a").click(function () {
                jQuery(this).removeClass("black");
            });         
        </script>

Answer 1

更改此

       jQuery(".close").click(function () {
            jQuery('#contato').animate({height:150},700);
            jQuery("#info").animate({height:115},700);
        });

到

       jQuery(".close").click(function () {
            jQuery('#menu-item-21').trigger('click');
        });

您遇到的问题是由于您使用了.toggle。现在，如果你单击X它动画关闭，但不影响.toggle状态。相反，让X触发点击#menu-item-21，这样就可以使用.toggle并影响切换状态。

jQuery简单：两个函数冲突

1 个答案: