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.. at<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;
}

Jクエリ

   $("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 に答える