ページを更新するときにクリックイベントが表示されないようにする方法

Question

クイックヘルプが必要です（事前に感謝します）。 私はシンプルなclkickイベントを持っている（下記参照）

document.documentElement.className = 'js'; 
//add the jQuery click/show/hide behaviours: 
$(document).ready(function() { 
    $(".reply").click(function() { 
    if ($("#list1").is(":visible")) { 
     $("#list1").hide(); 
    } else { 
     $("#list1").show(); 
    } 
    //don't follow the link (optional, seen as the link is just an anchor) 
    return false; 
    }); 
}); 

私のHTMLは次のとおりです。

<div class="form-row" id="living"> 
    <span><a class="reply2" href="#list2">Dining Room</a></span> 
    <label id="list2"> 
    <span>Dining Table - 6 persons</span> 
    <input type="checkbox" name="checkbox" checked> 
    <br /> 
    <span>Dining Table - 8/10 persons</span> 
    <input type="checkbox" name="checkbox" checked> 
    <br /> 
    <span>Dining Chairs</span> 
    <input type="checkbox" name="checkbox" checked> 
    <br /> 
    <span>Cabinet Dresser</span> 
    <input type="checkbox" name="checkbox" checked> 
    <br /> 
    <span>Display Unit</span> 
    <input type="checkbox" name="checkbox" checked> 
    <br /> 
    <span>Rug</span> 
    <input type="checkbox" name="checkbox" checked> 
    </label> 
</div> 

私の質問は：それはディスプレイとしてどのように私は、私はページを更新するときにロードするために私のjqueryのを防ぐことができますページが読み込まれるときのチェックリストタグ。 ご協力いただきありがとうございます。

Answer 1

は、溶液（でpreventDefault（）を使用）であります。 変更点： 「e」を.click（機能（e））に追加し、「e」 - eの方法を使用します。 preventDefault（）;

Answer 2

Jqueryがロードされないようにする必要はありません。私が正しく理解すれば、ロード時にチェックリストを非表示にすることができます。あなたは、いくつかのCSSでこれを行うことができます。

document.documentElement.className = 'js'; 
//add the jQuery click/show/hide behaviours: 
$(document).ready(function() { 
    $(".reply").click(function(e) { 
    e.preventDefault(); 
    if ($("#list1").is(":visible")) { 
     $("#list1").hide(); 
    } else { 
     $("#list1").show(); 
    } 
    return false; 
    }); 
}); 

今、あなたのリンクはハッシュタグへご案内しません。ここで

#list1 { 
    display : none; 
} 

$(document).ready(function() { 
 
    $(".reply").click(function() { 
 
    if ($("#list1").is(":visible")) { 
 
     $("#list1").hide(); 
 
    } else { 
 
     $("#list1").show(); 
 
    } 
 
    //don't follow the link (optional, seen as the link is just an anchor) 
 
    return false; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<style> 
 
#list1 { 
 
    display : none; 
 
} 
 
</style> 
 
    <div class="form-row" id="living"> 
 
     <span><a class="reply" href="#list2">Dining Room</a></span> 
 
     <label id="list1"> 
 
     <span>Dining Table - 6 persons</span> 
 
     <input type="checkbox" name="checkbox" checked> 
 
     <br /> 
 
     <span>Dining Table - 8/10 persons</span> 
 
     <input type="checkbox" name="checkbox" checked> 
 
     <br /> 
 
     <span>Dining Chairs</span> 
 
     <input type="checkbox" name="checkbox" checked> 
 
     <br /> 
 
     <span>Cabinet Dresser</span> 
 
     <input type="checkbox" name="checkbox" checked> 
 
     <br /> 
 
     <span>Display Unit</span> 
 
     <input type="checkbox" name="checkbox" checked> 
 
     <br /> 
 
     <span>Rug</span> 
 
     <input type="checkbox" name="checkbox" checked> 
 
     </label> 
 
    </div>