一個jquery的小例子

 <div class="contain">

        <div  class="flip"><a href="#">購買</a></div>
        <div  class="panel">
            <div class="visit">
                <dl>
                    <dt>企業1</dt>
                    <dd>新聞1</dd>
                    <dd>論文1</dd>
                    <dd>技術1</dd>
                    <dd>專利1</dd>
                </dl>
                <dl>
                    <dt>企業1</dt>
                    <dd>新聞1</dd>
                    <dd>論文1</dd>
                    <dd>技術1</dd>
                    <dd>專利1</dd>
                </dl>
                <dl>
                    <dt>企業1</dt>
                    <dd>新聞1</dd>
                    <dd>論文1</dd>
                    <dd>技術1</dd>
                    <dd>專利1</dd>
                </dl>
            </div>
        </div>

        <div  class="flip"><a href="#">產品</a></div>
        <div  class="panel">
            <div class="visit">
                <dl>
                    <dt>產品2</dt>
                    <dd>鋼琴2</dd>
                    <dd>鋼琴2</dd>
                    <dd>鋼琴2</dd>
                    <dd>鋼琴2</dd>
                </dl>
                <dl>
                    <dt>企業2</dt>
                    <dd>新聞2</dd>
                    <dd>論文2</dd>
                    <dd>技術2</dd>
                    <dd>專利2</dd>
                </dl>
                <dl>
                    <dt>企業2</dt>
                    <dd>新聞2</dd>
                    <dd>論文2</dd>
                    <dd>技術2</dd>
                    <dd>專利2</dd>
                </dl>
            </div>
        </div>

        <div  class="flip"><a href="#">下載</a></div>
        <div  class="panel">
            <div class="visit">
                <dl>
                    <dt>企業3</dt>
                    <dd>新聞3</dd>
                    <dd>論文3</dd>
                    <dd>技術3</dd>
                    <dd>專利3</dd>
                </dl>
                <dl>
                    <dt>企業3</dt>
                    <dd>新聞3</dd>
                    <dd>論文3</dd>
                    <dd>技術3</dd>
                    <dd>專利3</dd>
                </dl>
                <dl>
                    <dt>企業3</dt>
                    <dd>新聞3</dd>
                    <dd>論文3</dd>
                    <dd>技術3</dd>
                    <dd>專利3</dd>
                </dl>
            </div>
        </div>

        <div class="flip"><a href="#">論壇</a></div>
        <div class="panel">
            <div class="visit">
                <dl>
                    <dt>企業4</dt>
                    <dd>新聞4</dd>
                    <dd>論文4</dd>
                    <dd>技術4</dd>
                    <dd>專利4</dd>
                </dl>
                <dl>
                    <dt>企業4</dt>
                    <dd>新聞4</dd>
                    <dd>論文4</dd>
                    <dd>技術4</dd>
                    <dd>專利4</dd>
                </dl>
                <dl>
                    <dt>企業4</dt>
                    <dd>新聞4</dd>
                    <dd>論文4</dd>
                    <dd>技術4</dd>
                    <dd>專利4</dd>
                </dl>
            </div>
        </div>


    </div>


    <script type="text/javascript">
        //新方法
        $(function () {
            $(".flip").each(function (i) {
                $(this).click(function () {
                    $(".panel").eq(i).slideToggle("slow"); //當前點選的panel顯示
                    $(".panel").not(':eq('+i+')').hide();//當前外的其他panel隱藏
                    $(this).addClass("clickflip"); //當前點選的新增樣式
                    $(this).siblings().removeClass("clickflip"); //當前外的其他去掉樣式
                });
            });
        });
    </script>

這裡用到each函式進行遍歷、兄弟節點siblings函式、eq(i)函式、not(':eq(i)')函式、及show（）、hide（）、addClass()和RemoveClass（）等。

尤其是not(':eq(i)')這個巢狀函式的使用，是解決問題的關鍵。