자바스크립트 질문드립니다 ㅠ

<div class="gnb">
    <ul>
        <li><a href="#" class="gnb_btn2">대메뉴1</a></li>
        <li><a href="#" class="gnb_btn3">대메뉴2</a></li>
        <li><a href="#" class="gnb_btn">대메뉴3</a></li>
    </ul>
</div>

<div class="gnb_bar">
    <dl>
        <dd><a href="#">하위메뉴1</a></dd>
        <dd><a href="#">하위메뉴2</a></dd>
        <dd><a href="#">하위메뉴3</a></dd>
    </dl>
</div>

<div class="gnb_bar2">
    <dl>
        <dd><a href="#">하위메뉴1</a></dd>
        <dd><a href="#">하위메뉴2</a></dd>
        <dd><a href="#">하위메뉴3</a></dd>
    </dl>
</div>

<div class="gnb_bar3">
    <dl>
        <dd><a href="#">하위메뉴1</a></dd>
        <dd><a href="#">하위메뉴2</a></dd>
        <dd><a href="#">하위메뉴3</a></dd>
    </dl>
</div>

<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery(".gnb_btn").on("click", function(){
jQuery(".gnb_bar").toggleClass("on");
});
});
//-->
</script>

<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery(".gnb_btn2").on("click", function(){
jQuery(".gnb_bar2").toggleClass("on");
});
});
//-->
</script>

<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery(".gnb_btn3").on("click", function(){
jQuery(".gnb_bar3").toggleClass("on");
});
});
//-->
</script>