Question

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

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

Answer 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

Answer 2

在第一行中出现错误

<div class="top>

用引号完成课程，它将适合你

<div class="top">

Answer 3

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

JQuery toggle（）卡住了两个不同的按钮点击

3 个答案: