Question

我有以下jquery：

$('#second-panel li.link-panel').on('click', function() {
        var showDiv = $(this).children('a').attr('href').split('#');
        if ($('div#'+showDiv[1]).css('display') == 'none') {
            $('#second-panel').children('div.panel').hide();
            $('#second-panel li.link-panel').removeClass('active');
            $('div#'+showDiv[1]).slideDown();
            $(this).toggleClass('active');
        } else {
            $(this).toggleClass('active');
            $('div#'+showDiv[1]).slideUp();
        }
    });

    $('.fourth-panel li.link-panel').on('click', function() {
        var showDiv = $(this).children('a').attr('href').split('#');
        console.log($('.fourth-panel').children('div.panel').length);
        if ($('div#'+showDiv[1]).css('display') == 'none') {
            $('.fourth-panel').children('div.panel').hide();
            $('.fourth-panel li.link-panel').removeClass('active');
            $('div#'+showDiv[1]).slideDown();
            $(this).toggleClass('active');
        } else {
            $(this).toggleClass('active');
            $('div#'+showDiv[1]).slideUp();
        }
    });

和html：

<div id="second-panel">
    <ul class="tabs">
        <li class="link-panel active"><a href="#tab1">Tab 1</a></li>
        <li class="link-panel"><a href="#tab2">Tab 2</a></li>
        <li class="link-panel"><a href="#tab3">Tab 3</i></a></li>
    </ul>
        <div id="tab1" class="panel show">
            <p>hi!</p>
        </div>
        <div id="tab2" class="panel">
            <p>yo!</p>
        </div>
        <div id="tab3" class="panel">
            <p>hi 3</p>
        </div>  
</div>

<div class="fourth-panel">
            <ul class="tabs">
                <li class="link-panel active"><a href="#tab4">Tab 4</a></li>
                <li class="link-panel"><a href="#tab5">Tab 5</a></li>
            </ul>
            <div id="tab4" class="panel show">
                <p>hi!</p>
            </div>
            <div id="tab5" class="panel">
                <p>hi!</p>
            </div>
        </div>

理想情况下，如果我点击#second-panel中的标签，它会在#second-panel内切换内容，如果我点击.fourth-panel中的标签，它会在.fourth-panel内切换内容}。

然而，如果我点击.fourth-panel div中的标签，它会隐藏.panel和.fourth-panel中的所有#second-panel div。然而，console.log行表示.panel只有2个孩子.fourth-panel。这仅在我第一次点击.fourth-panel或#second-panel中的标签时发生。后续点击按我的意愿工作。我在这里缺少什么？

Answer 1

这是您想要尝试遵循脚本代码的输出：

<script>
    $(document).ready(function () {
        $('#second-panel li.link-panel').on('click', function () {
            var showDiv = $(this).children('a').attr('href').split('#');
            if ($('div#' + showDiv[1]).css('display') == 'none') {
                $('#second-panel').children('div.panel').hide();
                $('#second-panel li.link-panel').removeClass('active');
                $('div#' + showDiv[1]).slideDown();
                $(this).toggleClass('active');
            } else {
                $(this).toggleClass('active');
                $('div#' + showDiv[1]).slideUp();
            }
        });

        $('.fourth-panel li.link-panel').on('click', function () {
            var showDiv = $(this).children('a').attr('href').split('#');
            console.log($('.fourth-panel').children('div.panel').length);
            if ($('div#' + showDiv[1]).css('display') == 'none') {
                $('.fourth-panel').children('div.panel').hide();
                $('.fourth-panel li.link-panel').removeClass('active');
                $('div#' + showDiv[1]).slideDown();
                $(this).toggleClass('active');
            } else {
                $(this).toggleClass('active');
                $('div#' + showDiv[1]).slideUp();
            }
        });
    });
</script>

按类/ id单击的元素隐藏所有div，而不考虑父ID /类

1 个答案: