jQuery函数自动重新加载页面

Question

I have a problem using jQuery. I've made a drop-down menu and I want it drop-down when li tag inside menu is clicked.

I can use jQuery click function. It works but when jQuery function is completed then the web page automatically reloads and drop-down menu becomes hidden again.

Answer 1

$(document).ready(function () {
    $("#click_nav li a").click(function (event) {
        event.preventDefault(); // preventDefault() here
        $("#slide_nav").show();
    });
});

Answer 2

Use this HTML.....

<div class="col-md-12">
                    <div class="testing_menu">
                        <ul id="click_nav">
                            <li><a>Drop-Down</a>
                                <ul id="slide_nav" style="display: block;">
                                    <span class="tri_angle"></span>
                                    <li><a href="">Home</a></li>
                                    <li><a href="">About</a></li>
                                    <li><a href="">Profile</a></li>
                                    <li><a href="">Setting</a></li>
                                    <li><a href="">Log Out</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>