jquery slidetoggle隐藏上一个元素

时间:2014-01-15 10:33:19

标签: javascript jquery

我正在点击一个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>

希望得到一些帮助。

当我打开一个新的时,为什么其他'.togglesources'的div没有关闭?

1 个答案:

答案 0 :(得分: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;
        });

<强> Working Fiddle