Question

我正在使用css和jquery构建自己的Accordion选项卡。当单击一个选项卡时，它应该是打开的，任何其他打开的选项卡应该最小化或关闭，这应该是应该的。

问题是当单击打开的标签元素时，它也应该被关闭/最小化。我使用的是toggleClass，但它不能用于关闭相同的元素。表示默认的css没有切换。我花了很多时间在这段代码中，但找出问题

例如，如果div为id2且class＆＃39; open＆＃39;单击它将显示内容（工作），再次单击它时应该关闭（不工作）这是我的代码

Javascript代码

<script type="text/javascript" >
    $(document).ready(function(){
        $(document).on('click',function(e){
            if(e.target.nodeName == "H6")
            {
                var rootNode = e.target.parentElement.parentElement.getAttribute('id');
                var parentNode = e.target.parentElement.getAttribute('id');
                var childN = null;
                for(var i = 0;i<document.getElementById(rootNode).childElementCount;i++)
                 {
                   if($(document.getElementById(rootNode).children[i]).height()>25)
                    {
                     //childN = $(document.getElementById(rootNode).children[i]);
                        childN = $(document.getElementById(rootNode).children[i]).attr('class');
                        $(document.getElementById(rootNode).children[i]).removeClass('pp2');
                        //$(document.getElementById(rootNode).children[i]).addClass('pp');
                        break;
                    }
                }
    //                    alert(childN);
                //var childNode = document.getElementById(parentNode).childNodes[1].getAttribute('class');
                $(document.getElementById(parentNode)).toggleClass('pp2');
                //childN.toggleClass('pp');

               }
           });
       });
    </script>

Answer 1

代码中的问题是在尝试关闭打开的选项卡时，它会删除负责显示内容的css，直到这里很好但是当它退出下面的for循环时再次切换类以便打开的选项卡关闭并再次打开。

有缺陷的代码行

 $(document.getElementById(parentNode)).toggleClass('pp2');

解决方案是比较clicked元素的id和必须关闭的元素

        <script type="text/javascript" >
    $(document).ready(function(){
        $(document).on('click',function(e){
            if(e.target.nodeName == "H6")
            {
                var rootNode = e.target.parentElement.parentElement.getAttribute('id');
                var parentNode = e.target.parentElement.getAttribute('id');
                var childN = null;
                var comp = null;
                for(var i = 0;i<document.getElementById(rootNode).childElementCount;i++)
                {
                    if($(document.getElementById(rootNode).children[i]).height()>25)
                    {
                        childN = $(document.getElementById(rootNode).children[i]).attr('class');
                        comp = $(document.getElementById(rootNode).children[i]).attr('id');
                        $(document.getElementById(rootNode).children[i]).removeClass('pp2');
                        //$(document.getElementById(rootNode).children[i]).addClass('pp');
                        break;
                    }
                }
                if($(document.getElementById(parentNode)).attr('id')!=comp)
                {
                    $(document.getElementById(parentNode)).toggleClass('pp2');
                }
            }
        });
    });
</script>

Answer 2

您只需使用此代码：

$('#main h6').click(function(e){
    if($(this).parent().hasClass('active')) {
        $(this).parent().find('> .hid').slideUp().parent().removeClass('active');
    } else {
        $(this).closest('div#main').find('.pp.active > .hid').slideUp().parent().removeClass('active');
        $(this).parent().addClass('active');
        $(this).parent().find('> .hid').slideDown();
    }
});

这个css也是：

.hid{display: none;}

Jquery toggleClass无法正常工作

2 个答案: