堆栈内存溢出
  繁体   English   中英

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

[英]JavaScript Menu (Close when link clicked again)

 原文  2013-04-25 23:39:53  7   4    javascript/ html/ drop-down-menu

问题描述

我已经在我的网站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 个解决方案

解决方案1
 0  2013-04-26 00:06:55

你是这个意思吗？
我添加的只是$(".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上

解决方案2
 0 已采纳  2013-04-26 00:13:59

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

解决方案3
 0  2013-04-26 07:42:11

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

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

并将其隐藏在文档其余部分或部分文档的mouseover / click事件上

解决方案4
 0  2013-04-26 19:09:15

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击链接时关闭菜单 再次单击时关闭javascript选项卡 单击锚链接时关闭移动菜单 反应：单击链接时关闭汉堡菜单 单击其中的链接时关闭汉堡菜单 再次点击时如何一个一个关闭菜单 单击移动菜单链接时关闭汉堡菜单 使用 Javascript 在菜单外单击时如何关闭汉堡菜单 在移动设备上单击新按钮（单击菜单链接时）时关闭边栏？ 单击链接时关闭全屏菜单覆盖
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM