Javascript 容器导航下拉列表的onClick问题（需要双击才能下拉）

我的JS文件中的onClick函数有问题 当一个选项卡打开时，我尝试单击第二个链接，除非该链接被单击两次，否则新选项卡将不会打开。 以下是html代码：

这是JS

$(document).ready(function() {
document.menuIsOpen = false;

$('.tabContainer > div').hide();
$('.tabContainer > div:first-of-type').hide();

$('.tabButton').click(function(event) {
    if (document.menuIsOpen == false) {
        document.menuIsOpen = true;
        event.preventDefault();

        $('.tabContainer > div').hide();
        $("#" + $(this).attr('data-openTab')).toggle("slow").css("display", "block");

        $('.tabButton').click(function(event) {

            $('.tabContainer > div').hide();
            $("#" + $(this).attr('data-openTab')).show().css("display", "block");
        });
    } else {
        document.menuIsOpen = false;
        event.preventDefault();
        $('.tabContainer > div').hide("slow");
        $('.tabContainer > div:first-of-type').hide("slow");

    }

    $('.closeButton').click(function(event) {
        event.preventDefault();

        $('.tabContainer > div').hide("slow");
        $('.tabContainer > div:first-of-type').hide("slow");
    });
});

$('.tabContainer > div').hide();
$('.tabContainer > div:first-of-type').hide();
});

我确信我的代码非常混乱，但是除了onClick问题之外，它的工作方式应该是正常的。 提前谢谢你

HTML：

<nav>
    <div id="navContainer">
        <ul>
            <li>
            <a href='' class='tabButton' data-openTab='1'>1</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='2'>2</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='3'>3</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='4'>4</a>
            </li>
            <li>
            <a href='' class='tabButton' data-openTab='5'>5</a>
            </li>
        </ul>
    </div>
    <div id = "tabCont" class="tabContainer">
        <div id="1">1
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="2">2
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="3">3
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="4">4
            <a href="" class="closeButton"> CLOSE </a>
        </div>
        <div id="5">5
            <a href="" class="closeButton"> CLOSE </a>
        </div>
    </div>
</nav>

---

演示：

代码是否完整？它的形状似乎很奇怪！为什么要在onclick中创建另一个onclick？这可能就是问题所在。我添加了这一点，这样当单击另一个链接时，它会立即删除其他内容，而不是关闭第一个内容。

    document.menuIsOpen = false;
    $('.tabContainer > div').hide();
    $('.tabButton').click(function(event) {
        var
            open = $("#" + $(this).attr('data-openTab')),
            isOpened = open.is('.opened');

        event.preventDefault();
        if (document.menuIsOpen) {
            document.menuIsOpen = false;
            $('.opened').hide("slow").removeClass('opened');
        }
        if (!isOpened) {
            document.menuIsOpen = true;
            open.addClass('opened').show("slow").css("display", "block");
        }
    });
    $('.closeButton').click(function(event) {
        event.preventDefault();
        $('.opened').hide("slow").removeClass('opened');
    });