Question

我对HTML和CSS非常好，但是当涉及到JavaScript时 - 它只是从我身上溜走了。我在这里找到了很好的答案，但如果它与我需要的不完全匹配，我无法适应它。这是迄今为止的项目......

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

到目前为止一直很好 - 除了我发现许多用户不点击，除非他们以某种方式警告有更多要看。因此，为了提示用户，我在每篇文章的可见行末尾添加了“阅读更多”文本。我给这个文本提供了“faux-link”类，并将它设置为超链接。

问题在于我希望点击的文章上的文字从“Read more”切换到“Read less”，具体取决于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的信息我做了这些修改，但如果文章没有在关闭之前关闭，那么“少阅读”仍然存在......

<!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-多次显示/隐藏和切换虚假链接＆＃34;阅读更多...＆＃34;

1 个答案: