1

希望你们一切都好。当您打开下一部分时，有谁知道如何关闭上方或下方的树项目？因此，当您打开下一部分时，原始部分会关闭。（希望这是有道理的）。

请参阅下面的代码和我的代码笔，其中显示了正在运行的代码 ( http://cdpn.io/FDcBm )

<html>

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
ul {list-style-type: none}
ul li {margin-bottom: 0; padding-left: 1.5em}
.closed {background: url('http://www.planeswalkerslibrary.com/images/plus_icon.jpg') no-repeat 0 0; }

.open {background: url('http://www.planeswalkerslibrary.com/images/minus_icon.jpg') no-repeat 0 0;}

a {color:#0000FF;}      /* unvisited link */
a:visited {color:#0000FF;}  /* visited link */
a:hover {color:#0000FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

</style>

</head>

<body>
<font face="verdana" size = 2>

<font size=3 color=#000080><b>Testing</b></font>
</br>

<hr>

</br>

Please choose the Test Item Below:

<ul>
<li><b>I have submitted a Test Car</b>

        <ul>
        <li>Error discovered in the same test

            <ul>
            <li>Underpayment
                <ul>
                <li><a href=test.html target="_blank">Error discovered before you test</a></li>
                </ul>
                    <ul>
                    <li><a href=test.html target="_blank">Error discovered after Test</a> (e.g. you notice a test)</li>
                    </ul>
            </ul>
            </li>   
            <ul>
            <li><a href=test.html target="_blank">Testing</a></li>
            </ul>   
        </li>
        </ul>

        <ul>
        <li>Errors discovered in the test


            <ul>

            <li>Error discovered on or before the test
                <ul>
                <li>Underpayment
                <ul>
                <li><a href=test.html target="_blank">Error discovered before you test</a></li>
                </ul>
                    <ul>
                    <li><a href=test.html target="_blank">Error discovered after you test<a/> (e.g. you notice an error in a test)</li>
                    </ul>

                    </li>
                    </li>
                </ul>
                    <ul>
                        <li><a href=test.html target="_blank">Overtest</a></li>
                    </ul>   


        </ul>

            </li>
            <ul>

                <li><a href=test.html target="_blank">Error discovered on test</a></li>

            </ul>   
        </ul>

</li>

    </li>
    <li><b>I have submitted a test</b>
        <ul>
            <li><a href=test.html target="_blank">Incorrect date in test</a></li>
        </ul>
        <ul>
            <li><a href=test.html target="_blank">Incorrect date in the same test</a> (NOTE: a test)</li>
        </ul>
        <ul>
            <li><a href=test.html target="_blank">Incorrect test</a></li>
        </ul>
    </li>
    <li><b><a href=test.html target="_blank">I have missed a test (and have submitted a test)</a></b></li>
    <li><b>I have submitted a test</b>
        <ul>
            <li>Wrong test</li>
        </ul>
        <ul>
            <li>Wrong testy test</li>
        </ul>
        <ul>
            <li>Wrong mega test</li>
        </ul>
        <ul>
            <li>Wrong super test</li>
        </ul>
        <ul>
            <li>Super test</li>
        </ul>
        <ul>
            <li>Wrong mega super test</li>
        </ul>
        <ul>
            <li>Wrong Date of test</li>
        </ul>
        <ul>
            <li>Wrong Cat</li>
        </ul>
        <ul>
            <li>Wrong ultra test</li>
        </ul>
        <ul>
            <li>Wrong master test</li>
        </ul>
        <ul>
            <li>Wrong testy test</li>
        </ul>
        <ul>
            <li>Wrong tester test</li>
        </ul>
    </li>
</ul>


<script type="text/javascript">
$(function(){

$('li').has('ul').click(function(event){
    if(this == event.target) 
        {
        $(this).toggleClass('open');
        $(this).children('ul').toggle();
        }
    })
.addClass('closed')
.children('ul').hide();
});

</script>
</font>
</body>


</html>
4

1 回答 1

0

带插件：折叠手风琴。

UDPATE：

没有使用 .siblings() 方法的插件：jsfiddle

只需添加以下代码行：

        if ($(this).siblings().hasClass('open')) {
            $(this).siblings().addClass('closed').removeClass('open').children('ul').hide();
        }
于 2013-08-13T20:12:46.900 回答