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

时间：2013-04-25 23:39:53

标签： javascript html drop-down-menu

我在我的网站http://mytempsite.net/t1payments

上构建了一个自定义JS菜单

单击时，它会向下滑动另一个嵌套的UL。制作之后的原始问题是，当您在框中单击时，下拉列表将滑动备份，当一个是表单时，这不是很好。所以我添加到我的JS并且能够将它发送到不会发生的地方，但现在我无法弄清楚当你再次点击链接时如何恢复它。如果点击另一个链接，它会立即恢复，但是在第一次点击后离开网站之前，它将一直保持不变。

我希望得到一些帮助，使我的javascript代码正常工作，以便当下拉框中的点击不会关闭时，但如果下拉列表处于活动状态，他们会点击正文中的任意位置然后关闭，或者如果他们点击在链接上再次。

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>

4 个答案:

答案 0 :(得分：0)

这是什么意思？
我添加的所有内容都是$(".dropdown-active ul").slideUp();
我还在HTML

中将您的href更改为#

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

上

答案 1 :(得分：0)

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

答案 2 :(得分：0)

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

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

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

答案 3 :(得分：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>
相关问题
最新问题