JQuery toggle() 卡住了两个不同的按钮单击答案

【问题标题】：JQuery toggle() stuck with two diffrent button clickJQuery toggle() 卡住了两个不同的按钮单击
【发布时间】：2013-09-13 04:54:31
【问题描述】：

我有一个菜单栏，我必须在点击注册按钮和登录按钮时隐藏和显示。

我的 HTML：

<div class="top">
   <ul>
      <li><a id="login" href="#">Login</a></li>
      <li><a id="register" href="#">Register</a></li>
   </ul>
</div>

<div id="loginpanel">
    '<p>This is login panel</p>'
</div>

<div id="registerpanel">
    '<p>This is register panel</p>'
</div>

<div class="menu">
   <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>

我必须在登录和注册点击时隐藏菜单，但是当我点击定期间隔时，toggle() 功能无法正常工作，就像我点击登录按钮时它会隐藏但点击注册链接时菜单会出现

我的 JavaScript：

<script type="text/javascript"> 
    $("a#login").click(function () {    
        $(".menu").toggle();
        $("#loginpanel").slideToggle();  
        return false;
    });
    $("a#register").click(function () {
        $(".menu").toggle();
        $("#registerpanel").slideToggle();   
        return false;   
    });
</script>

【问题讨论】：

见jsfiddle.net/CZC35 - 适合我。我从 $('a#register') 和 $('a#login') 选择器中删除了“a”，并删除了对 registerpanel 的引用，因为它不在您的标记中。你还有一个额外的结尾 li 标签和 class="top is missing a final "
您能否重新表述您的问题以准确说明您想要什么。我完全糊涂了。所有回答者都想知道这一点。
我必须在登录/注册面板打开时隐藏菜单栏。并在登录/注册面板关闭切换正常工作时显示菜单栏，但是当用户打开登录面板和单击注册按钮而不关闭登录面板菜单栏不会隐藏只需检查此[链接]jsfiddle.net/e7SKp/12您必须单击登录按钮然后单击注册按钮可能你明白发生了什么问题

标签： jquery toggle show-hide slidetoggle

【解决方案1】：

基于when i click on regular interval the toggle() function not work properly 这一行，您正在触发多次点击事件，因此您的切换代码被卡住了

所以你需要告诉 DOM 停止它正在做的事情并重新开始。

你还有额外的li.. <li><a id="login" href="#">Login</a></li></li> 如果它的错别字然后忽略。

所以使用.stop()

$("a#login").click(function ()
{
    $(".menu").stop().hide();
    $("#loginpanel").stop().slideToggle();     
    return false;
});

$("a#register").click(function ()
{
    $(".menu").stop().show();
    $("#registerpanel").stop().slideToggle();  
    return false;   
});

Live Demo

【讨论】：

最好使用 '$(".menu").stop().toggle();'但是jquery直到菜单在登录点击时隐藏但没有关闭登录面板我点击注册按钮菜单在注册面板中可见并且如果我使用'$（“.menu”）.stop（）.hide（） ;'当我关闭登录面板时，链接消失了
@ArunMaddheshia 是的，我明白了...请参阅我之前对 .stop().toggle() jsfiddle.net/e7SKp/2 的评论
别生气，伙计..实际上我只想当我点击登录按钮时，菜单将隐藏/显示，登录面板显示/隐藏，当我点击注册按钮时，菜单将隐藏/显示并且注册面板将显示/隐藏但问题是当我单击登录按钮时菜单将隐藏并且登录面板在此时打开当我单击注册按钮时注册面板可见但菜单不会隐藏它会发生冲突再检查一遍...[/link]jsfiddle.net/e7SKp/2
它需要改进只需点击登录按钮然后点击注册按钮你会看到菜单不会隐藏。
一个小问题是这个函数不适用于'slideToggler();'

【解决方案2】：

在你的第一行你有一个错误

<div class="top>

用报价完成课程，它会为你工作

<div class="top">

【讨论】：

我不确定你想要什么。是你想要的this。您没有关闭脚本中的最后一个函数。
我没有看到任何行为变化。你能说出它是做什么的吗？

【解决方案3】：

感谢@Dipesh Parmar的帮助我来解决我的问题...

我的 HTML 代码

<div class="top">
<ul>
<li><a id="login" href="#">Login</a></li>
<li><a id="register" href="#">Register</a></li>
</ul>
</div>

<div id="loginpanel">
    '<p>This is login panel</p>'
</div>

<div id="registerpanel">
    '<p>This is register panel</p>'
</div>

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

CSS

#loginpanel
{
    display:none;
}


#registerpanel
{
    display:none;
}

JQUERY

   $("a#login").click(function ()
    {
        if($('#loginpanel').is(':visible')) {
            $('.menu').show();
        } else {
            $('.menu').hide();
        }
        $("#loginpanel").stop().slideToggle();  
        $("#registerpanel").hide();
    });

    $("a#register").click(function ()
    {
        if($('#registerpanel').is(':hidden')) {
            $('.menu').hide();
        } else {
            $('.menu').show();
        }
        $("#registerpanel").stop().slideToggle();
        $("#loginpanel").hide();        
    });



$("a#login").click(function ()
{
    $("#loginpanel").stop().slideToggle('fast',function(){
        if($('#loginpanel').is(':visible')) {
            $('.menu').show();
        } else {
            $('.menu').hide();
        }
    });
    $("#registerpanel").hide();
});

    $("a#register").click(function ()
    {
        $("#registerpanel").stop().slideToggle('fast',function(){
            if($('#registerpanel').is(':hidden')) {
                $('.menu').hide();
            } else {
                $('.menu').show();
            }
        });
        $("#loginpanel").hide();
    });

【讨论】：