jQuery-多个 show/hides 并切换 "Read more..." 的虚假链接

Question

我对 HTML 和 CSS 非常满意，但是当谈到 JavaScript 时 - 它就让我失望了。我在这里找到了很好的答案，但如果它不完全符合我的需要，我将无能为力。这是到目前为止的项目...

我有一组文章 classes “title_div story1”、“title_div story2”、“title_div story3”等。用户只看到每行的前几行。每篇文章中的其余行都有 class “hidden_div”。当用户单击文章的任意位置时，该文章的 hidden_div 会显示为 "slideDown"。再次单击，hidden_div 将再次隐藏为 "slideUp"。点击另一篇文章，第一篇文章向上滑动，新的文章向下滑动，依此类推。

到目前为止一切顺利 - 除了我发现许多用户不会点击，除非他们以某种方式提醒他们还有更多内容可看。因此，为了提示用户，我在每篇文章可见行的末尾添加了文本“阅读更多”。我给这个文本 class “faux-link” 并将其样式设置为 hyperlink。

问题是我希望点击文章上的文本根据 hidden_div 的显示状态从“阅读更多”切换到“阅读更少”。

我希望有人能帮助我完成我在这里开始的工作。

这是我一直在使用的 JavaScript，除了上面提到的最后一个小问题外，效果很好：

<script type="text/javascript">
  $(document).ready(function()
    {
        $(".title_div").click(
        function () {
             var div = $(this).attr('rel');
             $(".hidden_div").slideUp("fast");
             if ($("#"+div).is(":hidden")) 
             {
                $("#"+div).slideDown("fast");
             } else {
                $("#"+div).slideUp("fast");
            }
       });
  });
</script>

~~~~~ 使用来自 Washington Guedes 的信息，我做了这些更改，但如果在打开另一篇文章之前没有关闭文章，"read less" 仍然存在...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

          <title>test</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
               </script>

        <script type="text/javascript">
            $(document).ready(function()
                {
                   $(".title_div").click(function()
                   {
                      var div = $(this).attr('rel');
                      div = $("#" + div);
                      $(".hidden_div").slideUp("fast");

                if (div.is(":hidden")) 
                  {
                      div.slideDown("fast");

                      $(".faux-link", this).html("Read less");
                      // : search for class "faux-link" in this ".title_div" context and change its html text.

                   } else {
                      div.slideUp("fast");
                      $(".faux-link", this).html("Read more");
                   }
                });
            });
          </script>

          <style type="text/css">
               .title_div {
                    margin-bottom: 6px;
                    margin-left: 24px;
                    width: 100%;
                    float: left;
                    background-color: #6CC;
               }
               .faux-link {
                    color: #233b92;
                    text-decoration: underline;
               }
          </style>

    </head>

    <body>
               <!-- Lorem story 1 -->
               <div class="title_div" rel="story1">
                    <h3>Story1</h3>
                         <p>Visible section of the profile article. </p>
                    <div id="story1" class="hidden_div" style=" display:none;">
                         <p>Inside the hidden_div1.</p>
                         <p>Inside the hidden_div1.</p>
                         <p>Inside the hidden_div1.</p>
                         <p>Inside the hidden_div1.</p>
                    </div><!-- /hidden story 1 -->
                    <p class="faux-link">Read more...</p> 
               </div><!-- /title-div 1 --> 

               <!-- Lorem story 2 -->
               <div class="title_div" rel="story2">
                    <h3>Story2</h3>
                        <p> Visible section of the profile article. </p>
                    <div id="story2" class="hidden_div" style=" display:none;">
                         <p>Inside the hidden_div2.</p>
                         <p>Inside the hidden_div2.</p>
                         <p>Inside the hidden_div2.</p>
                         <p>Inside the hidden_div2.</p>
                    </div><!-- /hidden story 2 -->
                    <p class="faux-link">Read more...</p> 
                </div><!-- /title-div 2 --> 

               <!-- Lorem story 3 -->
               <div class="title_div" rel="story3">
                    <h3>Story3</h3>
                        <p> Visible section of the profile article. </p>
                    <div id="story3" class="hidden_div" style=" display:none;">
                         <p>Inside the hidden_div3.</p>
                         <p>Inside the hidden_div3.</p>
                         <p>Inside the hidden_div3.</p>
                         <p>Inside the hidden_div3.</p>
                    </div><!-- /hidden story 3 -->
                    <p class="faux-link">Read more...</p> 
                </div><!-- /title-div 3 --> 

               <!-- Lorem story 4 -->
               <div class="title_div" rel="story4">
                    <h3>Story4</h3>
                        <p> Visible section of the profile article. </p>
                    <div id="story4" class="hidden_div" style=" display:none;">
                         <p>Inside the hidden_div4.</p>
                         <p>Inside the hidden_div4.</p>
                         <p>Inside the hidden_div4.</p>
                         <p>Inside the hidden_div4.</p>
                    </div><!-- /hidden story 4 -->
                    <p class="faux-link">Read more...</p> 
                </div><!-- /title-div 4 --> 
    </body>
</html>

Answer 1

你可以做到 this:

$(document).ready(function(){
    $(".title_div").on("click", function(){
        var div = $(this).attr('rel');
        div = $("#" + div);
        $(".hidden_div").slideUp("fast");

        $(".faux-link").html("Read more");
        // : all "faux-link" get "Read more" text

        if (div.is(":hidden")) {
            div.slideDown("fast");

            $(".faux-link", this).html("Read less");
            // : only the "faux-link" of this ".title_div" get "Read less" text

        } else {
            div.slideUp("fast");
        }
    });
});

jQuery-多个 show/hides 并切换 "Read more..." 的虚假链接

jQuery-multiple show/hides and toggling fake links for "Read more..."

jquery

toggle

show-hide