JavaScript菜单（再次单击链接时关闭）

Question

I have built a custom JS menu on my website http://mytempsite.net/t1payments

When clicked it slides down another nested UL. The orignal problem after making it was that when you clicked within the boxes the dropdown would slide backup and thats not good when one is a form. So I added to my JS and was able to make it to where that would not happen, but now I am unable to figure out how to get it to go back up when you click on the link again. Right now it goes back up if another link is clicked, but 1 will always stay down until you leave the site after the first click.

I would like some assistance making my javascript code work properly so that when the click with in the dropdown box it does not close, but if a dropdown is active and they click anywhere in the body then it closes, or if they click on the link again.

MY JS CODE

<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>

MENU 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>

Answer 1

Is this what you mean?
All that I added was $(".dropdown-active ul").slideUp();
I also changed your href s to # in the HTML

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();
        }
    });
});

On jsfiddle

Answer 2

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

Answer 3

you should probably use toggle function for clicking again on the menu

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

and hide it on mouseover/click event on the rest of the document, or some part of it

Answer 4

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

Live 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>