Question

我有这个节目更多/更少的点击事件，它在第一次点击时发生了变化，但我不知道如何让它在返回点击时返回到之前的状态。

<Html>
  <head>
  </head>
  <body>
    <div id="showit">Show More</div>
    <div class="shown" style="display: none;"> 
      Here is some content that I want to display
    </div>

    <script>

        $(document).ready(function() {
          var element = document.getElementById("showit");

          $('#showit').click(function(){
            $('.shown').slideToggle("fast");
            element.innerHTML = "Show Less";
          });
        });

    </script>
  </body>
</html>

Fiddle

我是JS新手，有人可以帮忙吗？

感谢。

Answer 1

这样做：

$(document).ready(function() {
    $('#showit').click(function(){
         $('.shown').slideToggle("fast");
         $(this).text($(this).text() == 'Show Less' ? 'Show More': 'Show Less');
    });
});

Answer 2

最简单的方法是使用标志变量（JS中的开/关或真/假）：

var element = document.getElementById("showit");
var isShown = false;
    $('#showit').click(function(){
        $('.shown').slideToggle("fast");
        isShown = !isShown;                   // flip the flag
        element.innerHTML = isShown ? "Show Less" : "Show More";
    });

下面的工作小提琴和片段：

http://jsfiddle.net/jdwfkwc0/

＆＃13;

$(document).ready(function() {
  var element = document.getElementById("showit");
  var isShown = false;
  $('#showit').click(function() {
    $('.shown').slideToggle("fast");
    isShown = !isShown; // flip the flag
    element.innerHTML = isShown ? "Show Less" : "Show More";
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showit">Show More</div>
<div class="shown" style="display: none;">Here is some content that I want to display</div>

＆＃13;

Answer 3

你可以这样做：

$(document).ready(function() {
    var element = document.getElementById("showit");

    $('#showit').click(function(){
        var $el = $('.shown'),
            text = $el.is(":visible") ? 'More' : 'Less';
        alert();
        $el.slideToggle("fast");
        element.innerHTML = "Show " + text;
    });

});

这取决于div是否可见，您可以更灵活，因为您可以轻松更改文本。

Answer 4

解决方案可能很简单，只需添加toogleFlag并处理它：

    $(document).ready(function() {
    var element = document.getElementById("showit");
    var elementIsVisible = true;

    $('#showit').click(function(){

        $('.shown').slideToggle("fast");
        toggleText(element);
    });

    function toggleText(element){
        if(elementIsVisible){
            element.innerHTML =  "Show Less";
            elementIsVisible = false;
        }else{
            element.innerHTML =  "Show More";
            elementIsVisible = true;
        }        
    }

});

示例：http://jsfiddle.net/DariuszMusielak/yxb8681b/2/

在返回点击事件时切换innerHTML

4 个答案: