0

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

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

3 回答 3

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

现场演示

于 2013-09-13T05:07:18.240 回答
0

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

<div class="top>

用报价完成课程，它将为您工作

<div class="top">
于 2013-09-13T05:06:30.980 回答
0

感谢@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;
}

查询

   $("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();
    });
于 2013-09-16T13:42:40.233 回答