토글 기능 사용중인데 버튼 클릭할때 왜 새로고침이 될까요?

<ul>

<li> 버튼0</li>

 <li class="q-btn2"><p class="-pTxt -mov">버튼1</p>

<a href=""><img src="btn5.png" class="icon-img" style="top: 7px;"></a></li>
 <div class="popup-content" style="display:none">   

 토글 내용이 뜨는 부분

</div>

<li> 버튼2</li>

<li> 버튼3</li>

</ul>

<script type="text/javascript">

    $(".popup-content").hide();

    $('.q-btn2').click(function() { 
    if($('.popup-content').hasClass("open")) {
            $('.popup-content').css("display","none");
            $('.popup-content').removeClass("open");
    }else{
            $('.popup-content').css("display","block");
            $('.popup-content').addClass("open");
    }
});
 </script>

토글이 끄고 켜지고는 정상 작동하는데 버튼을 클릭할때마다

새로고침이 돼서 hide로 보였다 안보였다가 해요