jQuery slidetoggle隱藏上一個元素

Question

我正在處理click上的slideToggle函數，我想隱藏單擊新元素時被單擊的前一個元素，我以前使用過這套相同的代碼集，並且可以正常工作，但是現在不再工作了，我我為為什么它不再起作用而感到困惑：

我的代碼如下或查看jsfiddle

JS / js.js

$('.togglesources').hide();
$('.captionsource').on('click', function () {
            $(this).next('.togglesources').slideToggle();
            $(this).parent().siblings().children().next().slideUp();
                      return false;
        });

的index.html

<div class="mostpopular">
             <h4>Nokia:</h4>
             <h5>3100</h5>
            <p>Most popular mobile phone of the year</p>
                <div class="sources">
                    <p class="captionsource">Click to toggle source</p>
                        <div class="togglesources">
                            <p class="source"><a href="http://en.wikipedia.org/wiki/List_of_best-selling_mobile_phones#2003">Wikipedia (Data Source)</a></p>
                            <p class="source"><a href="http://gsmsolution24.blogspot.co.uk/2012/01/nokia-3100-3120-6100-hardware-repair.html" target="_blank">GSM Solution (Image Source)</a></p>
                        </div><!-- End Toggle Sources -->
                </div><!-- End Sources -->
        </div>
        <!-- END MOST POP -->
        <div class="mostpopular">

             <h4>Lord of the Rings:</h4>
             <h5>Return of the King</h5>
                <p>Highest Grossing Film</p>
                <div class="sources">
                    <p class="captionsource">Click to toggle source</p>
                    <div class="togglesources">
                         <p class="source"><a href="http://en.wikipedia.org/wiki/List_of_highest-grossing_films#High-grossing_films_by_year" target="_blank">Wikipedia</a></p>
                     <p class="source"><a href="http://www.imdb.com/title/tt0167260/" target="_blank">IMDB (Image Source)</a></p>
                        </div> <!-- End Toggle Sources -->
                </div> <!-- End Sources -->

        </div>

希望對此有所幫助。

當我打開一個新的div時，為什么其他'.togglesources'div沒有關閉？

Answer 1

嘗試這個：

    $('.togglesources').hide();
    $('.captionsource').on('click', function () {
    $(this).closest('.mostpopular').siblings().find('.togglesources').slideUp();
            $(this).next('.togglesources').slideToggle();
            $(this).parent().siblings().children().next().slideUp();
    return false;
        });

工作小提琴