なぜjquery関数を有効にするにはダブルクリックする必要がありますか？

Question

おやすみ、

なぜサイドナビゲーションバーが左からスライドするjquery機能を有効にするためにテストボタンを2回クリックしなければならないのですか。私はこれを行うには幅のCSSクラスをターゲットにして、それを '成長'させたいと思っていました。

閉じるボタンをクリックすると、通常の状態に戻ります。ここで

は、私がこれまでかなり新しい午前私を許し上に行くためにそこに足りあると思い、以下に示すコードです：

HTML：

<a href="" class="test">Click me</a> 

<div class="sidenav"> 
    <div class="closebtn"><a href="">Close me</a></div> 
</div> 

はCSS：

.sidenav { 
    padding-top: 50px; 
    height: 100vh; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #111; 
    overflow-x: hidden; 
    transition: 0.5s; 
    color: #ee81e0; 
} 

.test { 
    padding: 10px 20px; 
    border: 1px solid #d4127e; 
} 

Jquery：

$(document).ready(function(){ 
    $(".test").click(function(){ 
     $(".sidenav").css('width', '350px'); 
    }); 
}); 

$(document).ready(function(){ 
    $(".closebtn").click(function(){ 
     $(".sidenav").css('width', '0px'); 
    }); 
}); 

ありがとう！

Answer 1

同じページにとどまり、ナビを切り替えたい場合は、aタグのデフォルトの動作を無効にする必要があります。デフォルトでは、ブラウザはaタグをクリックするとそれに従います。 href属性が空であるため、現在のページに移動しようとするか、効果的にページを再読み込みしようとします。あなたのクリックハンドラ関数にeイベントを渡し、そしてあなたが2つの.ready()機能を必要としないe.preventDefault()

$(document).ready(function() { 
 
    $(".test").click(function(e) { 
 
    $(".sidenav").css('width', '350px'); 
 
    e.preventDefault(); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $(".closebtn").click(function() { 
 
    $(".sidenav").css('width', '0px'); 
 
    }); 
 
});

.sidenav { 
 
    padding-top: 50px; 
 
    height: 100vh; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    color: #ee81e0; 
 
} 
 

 
.test { 
 
    padding: 10px 20px; 
 
    border: 1px solid #d4127e; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" class="test">Click me</a> 
 

 
<div class="sidenav"> 
 
    <div class="closebtn"><a href="">Close me</a></div> 
 
</div>

Answer 2

を呼び出すことによって、リンクをたどるしようとしてから、ブラウザを維持することができます。すべてを1で囲みます。

さらに、イベントがバブルにならないようにevent.preventDefault();を使用してください。 event.preventDefault() | jQuery API Documentation

ワーキングコードスニペット：また

$(document).ready(function() { 
 
    $(".test").click(function(event) { 
 
    $(".sidenav").css('width', '350px'); 
 
    event.preventDefault(); 
 
    }); 
 

 
    $(".closebtn").click(function() { 
 
    $(".sidenav").css('width', '0px'); 
 
    }); 
 
});

.sidenav { 
 
    padding-top: 50px; 
 
    height: 100vh; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    color: #ee81e0; 
 
} 
 
.test { 
 
    padding: 10px 20px; 
 
    border: 1px solid #d4127e; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a href="" class="test">Click me</a> 
 

 
<div class="sidenav"> 
 
    <div class="closebtn"><a href="">Close me</a> 
 
    </div> 
 
</div>