容器导航下拉列表的单击问题(需要双击才能下拉）

onClick issue with navigation dropdown for container(needs double clicks to dropdown)

本文关键字：双击 导航 下拉列表 问题 单击      更新时间：2023-09-26

我在 JS 文件中使用 onClick 函数时遇到问题当打开一个选项卡时，我尝试单击第二个链接，除非单击链接两次，否则新选项卡不会打开。这是 HTML 代码：

<body> <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"> </div> </div> <div id="2" > <a href="" class="closeButton"> CLOSE </a> </div> <div id="3" > <a href="" class="closeButton"> CLOSE </a> </div> <div id="4" > <a href="" class="closeButton"> CLOSE </a> </div> <div id="5" > <a href="" class="closeButton"> CLOSE </a> </div> </nav> </body>

这是 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>

.JS：

    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');
    });

演示：http://jsfiddle.net/nothrem/mcgv4gok/

相关文章：