Почему событие JS «onclick» срабатывает после второго щелчка, а не первого? ASP.MVC

Question

Может кто-нибудь сказать мне, почему тег a делает мой первый клик, не открывая таблицу, но берет адрес, который должен идти (в первый момент таблица скрыта)

и после второго щелчка открывается стол, и я иду к нему. без тега <a href="#team-@team.Id"> он открывается одним кликом. #team-**@team.Id** - это нормально, я сделал 15 таблиц за цикл, и сделал для каждой таблицы идентификатор)

мой код в поле зрения

<div id=team-logo-wrapper>
<ul>
    @foreach (Team team in Model.Item2)
    {
        <li>
            <div class="team-section-box">
                <p class="team-name">@team.Name</p>
                <a href="#team-@team.Id">
                    <img src="@Url.Content(string.Format("~/Images/NBAlogoImg/{0}", team.Path))" class="logo-images" alt="Логотип @team.Name" title="Логотип @team.Name" onclick="ShowTable(@team.Id)" />
                </a>

            </div>
        </li>
    }
</ul>

в CSS мое отображение и видимость

.table-hidden {
  margin-top: 50px;
  display: none;
  visibility: hidden;
}

самый простой скрипт

var flag = true;
function ShowTable(teamId) {
    var id = "team-" + teamId;
    var getElem = document.getElementById(id);

    if (flag) {
        flag = false;
        getElem.style.display = 'none';
        getElem.style.visibility = 'hidden';
    }

    else {
        flag = true;
        getElem.style.display = 'block';
        getElem.style.visibility = 'visible';
    }
}

Answer 1

При нажатии на изображение вы также активируете ссылку.

Если вам действительно нужна ссылка, измените ее на что-то вроде:

<a  href="javascript: void(0)">
  <img src="@Url.Content(string.Format("~/Images/NBAlogoImg/{0}", team.Path))" 
       class="logo-images" alt="Логотип @team.Name" 
       title="Логотип @team.Name" 
       onclick="ShowTable(@team.Id)" />
 </a>