1

我有新闻列表，包括简短的全文和新闻文章的标题。单击它会展开完整视图，反之亦然。然而，点击第一篇文章也会展开所有其他文章。我如何只影响我点击的那个？

这是示例：

$(document).ready(function () {
    $('.news-expand').click(function () {
        $(".news-content-short").toggle();
        $(".news-content-full").toggle();
        $('.news-date').toggleClass('active-date');
        $('.news-expand').toggleClass('active');
    });
});
4

6 回答 6

5

您只需对您单击的部分中的项目进行操作。代码如下：

$(document)
    .ready(function () {
    $('.news-expand')
        .click(function () {
        var par = $(this).parents('.main-news-holder');
        par.find(".news-content-short").toggle();
        par.find(".news-content-full").toggle();
        par.find('.news-date').toggleClass('active-date');
        par.find('.news-expand').toggleClass('active');
        return false;
    });
});

检查这个演示：http: //jsbin.com/ikijap/1/edit

于 2012-10-19T12:06:55.673 回答
4

您的问题不在于您的点击事件是基于类调用的，而是在您的点击事件中您正在对类中的每个项目进行操作。

相反，使用这个

有关点击事件的更多详细信息，请参阅JQuery 的 API

于 2012-10-19T12:01:30.370 回答
3

这是因为您总是在处理集合中的所有项目。因此，例如$(".news-content-short").toggle();使用相应的类切换所有项目，而不仅仅是您想要的。

以下应该有效：

$('.news-expand').click(function () {
      $parent = $(this).parents(".main-news-holder");
      $parent.find(".news-content-short,.news-content-short").toggle().end()
             .find('.news-date').toggleClass('active-date').end()
             .find('.news-expand').toggleClass('active');
});

你的例子工作

于 2012-10-19T12:03:53.880 回答
0 
$(document)
    .ready(function () {
    $('.news-expand').click(function () {
        var parent = $(this).closest('.main-news-holder');
        $(this).toggleClass('active');
        parent.find(".news-content-short").toggle();
        parent.find(".news-content-full").toggle();
        parent.find('.news-date').toggleClass('active-date');
    });
});
于 2012-10-19T12:04:05.580 回答
0

您将需要到达父 div，然后您可以隐藏/显示正确的 div。在此处查看 jsbin 演示：http: //jsbin.com/irihax/14/

$(document)
    .ready(function () {
    $('.news-expand')
        .click(function () {
          var mainDiv = $(this).parent().parent().parent();
        mainDiv.find(".news-content-short").toggle();
        mainDiv.find(".news-content-full").toggle();
        mainDiv.find('.news-date').toggleClass('active-date');
        mainDiv.find('.news-expand').toggleClass('active');
    });

});
于 2012-10-19T12:07:02.520 回答
0

通过重新排列html代码，

<!DOCTYPE html>
<html>

    <head>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
        <script>
$(document)
    .ready(function () {
    $('.news-header')
        .click(function () {
        $(this).children('div').toggle();
    });
});
        </script>
    </head>

    <body>
        <div id="main-news">
            <div class="main-news-holder">
                <div class="news-date">
                    <p>1 sep</p>
                </div>
                <div class="news-header" style="border:1px solid;">
                    <p><a class="news-expand" href="#">Show more</a></p>
                    <div class="news-content-short">
                    <p>short short short short short</p>
                    </div>
                    <div class="news-content-full" style="display: none;">
                        <p>text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text</p>
                    </div>
                </div>

            </div>
            <!-- ################################################################################################################################
            -->
            <div class="main-news-holder">
                <div class="news-date">
                    <p>2 sep</p>
                </div>
                <div class="news-header">
                    <p><a class="news-expand" href="#">Show more</a></p>
                    <div class="news-content-short">
                    <p>short short short short short</p>
                    </div>
                    <div class="news-content-full" style="display: none;">
                        <p>text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text text text text text text text text text text
                            text text text text text text</p>
                    </div>
                </div>

            </div>
    </body>

</html>

希望这会有所帮助。

于 2012-10-19T12:20:37.000 回答