每按一次按钮,我想在两个功能之间切换

时间:2017-10-12 17:57:57

标签: javascript jquery css events onclick

我有很长的内容,只想展示其中的一部分,当用户点击“阅读更多”内容时,然后我想要显示整个内容并更改按钮“阅读更多”'要少阅读'同样来自“少阅读”#39;更多地阅读'。我怎样才能做到这一点? 我在下面附上了我的代码,



$(document).ready(function(){
  $("#click-me").on("click",  function(){
    $(this).html("Read Less");
    $(".content").css("overflow","auto");
    $(".content").css("height","auto");
  });
});

.card{
  border: 1px solid black;
  margin: 10px;
  padding: 20px;
}
.content{
  overflow: hidden;
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <div class="content">
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1]

Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series.
  </div>
  <button id="click-me">Read More</button>
</div>
&#13;
&#13;
&#13;

现在,我可以从&#39;阅读更多&#39;去少阅读&#39;但我没有谈到如何从“少阅读”中切换到#39;到&#39;阅读更多&#39;试。

编辑:

如果我要显示多个内容,然后我想在Read more和Read less之间切换,该怎么办?我在下面附上我的代码,我正在使用&#39;这个&#39; object用于访问当前对象,但没有了解如何访问该元素的内容。

&#13;
&#13;
$(document).ready(function(){
  var readMore=true;
  $(".more-less").on("click",  function(){
    var txt=$(this).html();
    console.log($(this));
    if(readMore){
    $(this).html("Read Less");
    $('.content').css("overflow","auto");
    $(this).css("height","auto");
      readMore=false;
    }else{
    $(this).html("Read More...");
    $('.content').css("overflow","hidden");
    $(this).css("height","40px");     
      readMore=true;
    }
  });
});
&#13;
.card{
  border: 1px solid black;
  margin: 10px;
  padding: 20px;
}
.content{
  overflow: hidden;
  height: 40px;
}
.more-less{
  text-decoration: none;
  font-weight: bold;
}
&#13;
<div class="card">
  <div class="content">
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1]

Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series.
  </div>
  <a href="#" class="more-less">Read More...</a>
</div>
<div class="card">
  <div class="content">
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1]

Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series.
  </div>
  <a href="#" class="more-less">Read More...</a>
</div>
&#13;
&#13;
&#13;

感谢您的回答。

6 个答案:

答案 0 :(得分:2)

我使用了一个带有类的委托来控制状态。

&#13;
&#13;
$(document).ready(function(){
  $('#read-options')
    .on('click', "#click-me.expanded", function(){
      $(this).html("Read More").removeClass('expanded');
      $(".content").css("overflow","");
      $(".content").css("height","");
    }).on('click', "#click-me:not(.expanded)", function(){
      $(this).html("Read Less").addClass('expanded');
      $(".content").css("overflow","auto");
      $(".content").css("height","auto");
    });
});
&#13;
.card{
  border: 1px solid black;
  margin: 10px;
  padding: 20px;
}
.content{
  overflow: hidden;
  height: 40px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <div class="content">
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1]

Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series.
  </div>
  <span id="read-options">
    <button id="click-me">Read More</button>
  </span>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

答案已更新,以回答其他问题。

实现此目标的最简单方法是创建其他CSS类并通过单击进行切换。看到你想让它适用于多个按钮,我们也应该更新HTML。代码不会依赖于按钮的id属性:

&#13;
&#13;
$(document).ready(function(){
  $(".toggle-more").on("click",  function(){
    $(this).closest(".card").toggleClass("show-more");
  });
});
&#13;
.card {
  border: 1px solid black;
  margin: 10px;
  padding: 20px;
}
.card .content {
  overflow: hidden;
  height: 40px;
}
.card.show-more .content {
  overflow: auto;
  height: auto;
}
.card .toggle-more:before {
  content: "Read More";
}
.card.show-more .toggle-more:before {
  content: "Read Less";
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <div class="content">
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1]
    Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series.
  </div>
  <button class="toggle-more"></button>
</div>
<div class="card">
  <div class="content">
    Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels, the first of which is A Game of Thrones. It is filmed in Belfast and elsewhere in the United Kingdom, Canada, Croatia, Iceland, Malta, Morocco, Spain, and the United States. The series premiered on HBO in the United States on April 17, 2011, and its seventh season ended on August 27, 2017. The series will conclude with its eighth season premiering either in 2018 or 2019.[1]
    Set on the fictional continents of Westeros and Essos, Game of Thrones has several plot lines and a large ensemble cast but centers on three primary story arcs. The first story arc centers on the Iron Throne of the Seven Kingdoms and follows a web of alliances and conflicts among the dynastic noble families either vying to claim the throne or fighting for independence from the throne. The second story arc focuses on the last descendant of the realm's deposed ruling dynasty, exiled and plotting a return to the throne. The third story arc centers on the longstanding brotherhood charged with defending the realm against the ancient threats of the fierce peoples and legendary creatures that lie far north, and an impending winter that threatens the realm.Game of Thrones has attracted record viewership on HBO and has a broad, active, international fan base. It has been acclaimed by critics, particularly for its acting, complex characters, story, scope, and production values, although its frequent use of nudity and violence (including sexual violence) has been criticized. The series has received 38 Primetime Emmy Awards, including Outstanding Drama Series in 2015 and 2016, more than any other primetime scripted television series. Its other awards and nominations include three Hugo Awards for Best Dramatic Presentation (2012–2014), a 2011 Peabody Award, and four nominations for the Golden Globe Award for Best Television Series – Drama (2012 and 2015–2017). Of the ensemble cast, Peter Dinklage has won two Primetime Emmy Awards for Outstanding Supporting Actor in a Drama Series (2011 and 2015) and the Golden Globe Award for Best Supporting Actor – Series, Miniseries or Television Film (2012) for his performance as Tyrion Lannister. Lena Headey, Emilia Clarke, Kit Harington, Maisie Williams, Diana Rigg, and Max von Sydow have also received Primetime Emmy Award nominations for their performances in the series.
  </div>
  <button class="toggle-more"></button>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

您可以查看当前文本的内容并执行其他操作。

$(document).ready(function(){
  $("#click-me").on("click",  function(){
    if ($(this).html() === "Read More") {
      // Change to Read Less
    } else { 
      // Change to Read More
    }

  });
});

答案 3 :(得分:0)

#include <stdio.h>
#include <stdlib.h>

typedef struct node {
    int fld1;
    char fld2;
    struct node *next;
} node;

int main(void) {
    struct head {
        struct node *first;
        int count;
    } head;

    int x;
    char y;
    node *newptr;
    node *currentptr;
    node *previousptr;

    head.first = NULL;
    head.count = 0;
    int zz = 1;
    int i;

    do {
        printf("Enter a value between 1 and 10: ");
        scanf(" %i", &x);
        printf("Enter a letter: ");
        scanf(" %c", &y);
        printf("in");

        newptr = (node*)malloc(sizeof(node));
        newptr->fld1=x;
        newptr->fld2=y;

        if (head.first == NULL) {
            head.first = newptr;
            head.count++;
            newptr-> next == NULL;
        } else {
            currentptr = head.first;
            if (currentptr->next == NULL) {
                head.count++;
                currentptr->next = newptr;
                newptr->next = NULL;
            } else {
                currentptr = currentptr->next;
                int i;
                for (i = 1; i < head.count; i++){
                    if (currentptr->next == NULL) {
                        currentptr->next = newptr;
                    } else {
                        currentptr = currentptr->next;
                    }
                    head.count++;
                }
            }
            printf("%d\n %c\n", head.count, newptr);
        }
    } while (x != 99);
}
$(document).ready(function(){
  var readMore=true;
  $(".more-less").on("click",  function(){
    var txt=$(this).html();
    console.log($(this));
    if(readMore){
    $(this).html("Read Less");
    $(this).parent().find('.content').css("overflow","auto");
    $(this).css("height","auto");
      readMore=false;
    }else{
    $(this).html("Read More...");
    $(this).parent().find('.content').css("overflow","hidden");
    $(this).css("height","40px");     
      readMore=true;
    }
  });
});
.card{
  border: 1px solid black;
  margin: 10px;
  padding: 20px;
}
.content{
  overflow: hidden;
  height: 40px;
}
.more-less{
  text-decoration: none;
  font-weight: bold;
}

答案 4 :(得分:0)

您可以使用HTML5 data-*属性为同一事件设置不同的答题器:

$("#click-me").on("click",  function(){
  if ($(this).attr("data-shouldOpen") != "false") {
      $(this).attr("data-shouldOpen", "false");
      open(); // opening code here
  } else {
      $(this).attr("data-shouldOpen", "true");
      close(); // closing code here 
  }
});

您可以通过按钮关联不同的div来打开/关闭。

答案 5 :(得分:0)

    $(document).ready(function(){
  $("#click-me").on("click",  function(){
    $(this).toggleClass('readLess');
    $(".content").toggleClass('hidden');
    if($(this).hasClass('readLess')){
      $(this).text("Read Less");
    }else{
      $(this).text("Read More");
    }
  });
});

.hidden {
  overflow: auto;
  height: auto;
} // add this to your styles