0

我在我的网站http://mytempsite.net/t1payments上构建了一个自定义 JS 菜单

单击时，它会滑下另一个嵌套的 UL。制作后的原始问题是，当您在框内单击时，下拉菜单会滑动备份，而当您是表单时，这并不好。所以我添加到我的 JS 中，并且能够将它放到不会发生的地方，但现在我无法弄清楚当你再次点击链接时如何让它恢复。现在，如果单击另一个链接，它会恢复，但 1 将始终保持关闭状态，直到您在第一次单击后离开站点。

我需要一些帮助以使我的 javascript 代码正常工作，以便在下拉框中单击时它不会关闭，但是如果下拉菜单处于活动状态并且他们单击正文中的任何位置然后它会关闭，或者如果他们单击链接再次。

我的 JS 代码

<script>
   $(function() {
     $(".dropdown, .dropdown2").click(function() {
     if($(this).hasClass("dropdown-active")) {
     $("nav").click(function(e) {
     if (e.target.id == "wpcf7-f42-t1-o1" || $(e.target).parents("#wpcf7-f42-t1-o1").size()) { 

         } 
      else { 
           $(".dropdown-active ul").slideUp();
       $(".dropdown-active").removeClass("dropdown-active");
       }
           });
       } 
      else {
       $(".dropdown-active ul").slideUp();
       $(".dropdown-active").removeClass("dropdown-active");
       $(this).addClass("dropdown-active")
       .find("ul").slideDown();
       }
      });       
    });

</script>

菜单 HTML

<div class="main-menu">
   <ul id="nav" style="display: block;">
     <li class="dropdown2">
     <a href="javascript:void(0);">GET HELP</a>
    <ul id="sliderbox" style="display: none; width:300px">
    <?php echo do_shortcode('[contact-form-7 id="42" title="Contact form 1"]'); ?> 
    </ul>
      </li>
      <li class="dropdown2">
      <a href="javascript:void(0);">CONTACT</a>
      <ul id="sliderbox" style="display: none;">
    <span class="u">Sales / Info Contact Information</span><br>
         Phone # 877-240-9959<br>
         Fax # 866-571-1690<br>
         Email : Info@T1Payments.com<br><br>

        <span class="u">Tech / Billing Contact Information</span><br>
         Phone # 877-245-1484<br>
         Fax # 866-245-6067<br>
         Email : Merchant@T1Payments.com<br>
    </ul>
    </li>
    <li class="dropdown2">
    <a href="javascript:void(0);">LOCATIONS</a>
    <ul id="sliderbox" style="display: none;">
    <span class="u">Corporate Headquarters:</span><br>
         410 South Rampart, Suite #390<br>
         Las Vegas, Nevada, 89145<br>
         (Under Construction / May, 2013)<br><br>

        <span class="u">Sales / Support Centers:</span><br>
         <br>
         Nevada:<br>
         3960 Howard Hughes Pkwy  Suite #500<br>
         Las Vegas, NV , 89169<br><br>

         California:<br>
         9465 Wilshire Blvd Suite #300<br>
         Beverly Hills , California , 90212<br>
         (Under Construction / June, 2013)<br><br>

         Illinois: <br>
         180 North Stetson Street Suite #3500<br>
         Chicago, Illinois , 60601<br>
         (Under Construction / June, 2013)<br><br>

         Florida:<br>
         Miami (August 2013)<br>
    </ul>
    </li>
    </ul>
        </div>
4

4 回答 4

0

JSfiddle http://jsfiddle.net/4VS7p/29/

直播http://mytempsite.net/t1payments/

JavaScript

    var 
    hideMenu = function(){
        $(".dropdown-active ul").slideUp();
        $(".dropdown-active").removeClass("dropdown-active");
    },
    showMenu = function(){
        $(".dropdown-active ul").slideUp();
        $(".dropdown-active").removeClass("dropdown-active");
        $(this).addClass("dropdown-active").find("ul").slideDown();
    };

    $("#website-header-wrapper").click(function (e) {
        hideMenu();
    });

    // PREVENT ANKER TO ACT ON CLICK (shorthand method)
    // BETTER THAN THE OLD "javascript:void(0);"
    $(".dropdown2 + A").click(false);

    // DON'T CLOSE THE OPEN MENU
    // WHEN WE CLICK INSIDE
    $(".dropdown2 UL").click(false);

    $(".dropdown2").click(function () {
        if ($(this).hasClass("dropdown-active")) {
            // IT'S THE ACTIVE MENU ITEM
            // SO WE HIDE IT
            hideMenu();
        } else {
            // OTHERWISE WE TOGGLE THE
            // CURRENT STATE
            // NOTE showMenu was called in context of this
            showMenu.call(this);
        }
        return false;
    });

HTML

 <div class="main-menu">
 <ul id="nav" style="display: block;">
    <li class="dropdown2">  <a href="javascript:void(0);">GET HELP</a>

        <ul class="sliderbox" style="display: none; width:300px">
            <?php echo do_shortcode( '[contact-form-7 id="42" title="Contact form 1"]'); ?>
        </ul>
    </li>
    <li class="dropdown2">  <a href="javascript:void(0);">CONTACT</a>

        <ul class="sliderbox" style="display: none;">   
            <span class="u">Sales / Info Contact Information</span>
            <br>Phone # 877-240-9959
            <br>Fax # 866-571-1690
            <br>Email : Info@T1Payments.com
            <br>
            <br>
            <span class="u">Tech / Billing Contact Information</span>
            <br>Phone # 877-245-1484
            <br>Fax # 866-245-6067
            <br>Email : Merchant@T1Payments.com
            <br>
        </ul>
    </li>
    <li class="dropdown2">  <a href="javascript:void(0);">LOCATIONS</a>

        <!-- NOTE: you have used attribute ID for "sliderbox" -->
        <!-- and this on three different elements -->
        <ul class="sliderbox" style="display: none;">   <span class="u">Corporate Headquarters:</span>
            <br>410 South Rampart, Suite #390
            <br>Las Vegas, Nevada, 89145
            <br>(Under Construction / May, 2013)
            <br>
            <br>
            <span class="u">Sales / Support Centers:</span>
            <br>
            <br>Nevada:
            <br>3960 Howard Hughes Pkwy Suite #500
            <br>Las Vegas, NV , 89169
            <br>
            <br>California:
            <br>9465 Wilshire Blvd Suite #300
            <br>Beverly Hills , California , 90212
            <br>(Under Construction / June, 2013)
            <br>
            <br>Illinois:
            <br>180 North Stetson Street Suite #3500
            <br>Chicago, Illinois , 60601
            <br>(Under Construction / June, 2013)
            <br>
            <br>Florida:
            <br>Miami (August 2013)
            <br>
        </ul>
     </li>
  </ul>
</div>
<section id="website-header-wrapper">THIS IS TO REPRESENT MY MAIN CONTAINER THAT I AM USING TO MAKE THE DROP DOWNS GO UP WHEN YOU CLICK ANYWHERE NOT ON THEM.</section>
于 2013-04-26T19:09:15.567 回答
0

你是这个意思吗？
我添加的只是$(".dropdown-active ul").slideUp();
我还在HTML 中将您href的 s更改为#

HTML：

<div class="main-menu">
    <ul id="nav" style="display: block;">
        <li class="dropdown2"> <a href="#">GET HELP</a>
            <ul id="sliderbox" style="display: none; width:300px">
                <?php echo do_shortcode( '[contact-form-7 id="42" title="Contact form 1"]'); ?>
            </ul>
        </li>
        <li class="dropdown2"> <a href="#">CONTACT</a>
            <ul id="sliderbox" style="display: none;"> <span class="u">Sales / Info Contact Information</span>
                <br>Phone # 877-240-9959
                <br>Fax # 866-571-1690
                <br>Email : Info@T1Payments.com
                <br>
                <br> <span class="u">Tech / Billing Contact Information</span>
                <br>Phone # 877-245-1484
                <br>Fax # 866-245-6067
                <br>Email : Merchant@T1Payments.com
                <br>
            </ul>
        </li>
        <li class="dropdown2"> <a href="#">LOCATIONS</a>
            <ul id="sliderbox" style="display: none;"> <span class="u">Corporate Headquarters:</span>
                <br>410 South Rampart, Suite #390
                <br>Las Vegas, Nevada, 89145
                <br>(Under Construction / May, 2013)
                <br>
                <br> <span class="u">Sales / Support Centers:</span>
                <br>
                <br>Nevada:
                <br>3960 Howard Hughes Pkwy Suite #500
                <br>Las Vegas, NV , 89169
                <br>
                <br>California:
                <br>9465 Wilshire Blvd Suite #300
                <br>Beverly Hills , California , 90212
                <br>(Under Construction / June, 2013)
                <br>
                <br>Illinois:
                <br>180 North Stetson Street Suite #3500
                <br>Chicago, Illinois , 60601
                <br>(Under Construction / June, 2013)
                <br>
                <br>Florida:
                <br>Miami (August 2013)
                <br>
            </ul>
        </li>
    </ul>
</div>

JavaScript

$(function () {
    $(".dropdown, .dropdown2").click(function () {
        if ($(this).hasClass("dropdown-active")) {
            $("nav").click(function (e) {
                if (e.target.id == "wpcf7-f42-t1-o1" || $(e.target).parents("#wpcf7-f42-t1-o1").size()) {
                } else {
                    $(".dropdown-active ul").slideUp();
                    $(".dropdown-active").removeClass("dropdown-active");
                }
            });
        } else {
            $(".dropdown-active ul").slideUp();
            $(".dropdown-active").removeClass("dropdown-active");
            $(this).addClass("dropdown-active")
                .find("ul").slideDown();
        }
    });
});

在jsfiddle 上

于 2013-04-26T00:06:55.110 回答
0

您可能应该使用切换功能再次单击菜单

    $('#click').click(function() {
        $('#box').toggle('slow', function() {
        // Animation complete.
        });
     });

并将其隐藏在文档其余部分或其某些部分的鼠标悬停/单击事件中

于 2013-04-26T07:42:11.057 回答
0

您可以将单击处理程序（切换下拉框）绑定到链接本身，并将另一个单击处理程序绑定到下拉框（使事件停止传播并返回 false）。

于 2013-04-26T00:13:59.690 回答