Question

我有一个jQuery slideToggle，我用它来显示和隐藏某些内容。它总是显示一个向下的箭头，但如果单击并显示文本，则箭头应朝上。无论如何要做到这一点？

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").slideToggle();
        });
    });
</script>

<button>&#8595;</button>
<p>Wow!</p>

</body>
</html>

Answer 1

就这么简单！

var toggled = false;
$("button").click(function() {
  if (!toggled) {
    $(this).html("&#8593;");
    toggled = true;
  } else {
    $(this).html("&#8595;");
    toggled = false;
  }

  $("p").slideToggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  &#8595;
</button>
<p>
  Wow!
</p>

Answer 2

工作演示

$(document).ready(function() {
  $("button").click(function() {
    $("p").slideToggle();
    $(this).toggleClass('down up');

  });
});

.down {
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
  height: 130px;
  width: 130px;
}
.up {
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png");
  height: 130px;
  width: 130px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="down"></button>
<p>Wow!</p>

Answer 3

尝试这样的事情.. :)）

$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle();
        $( this ).text('NewButtonText');
    });
});

Answer 4

此解决方案检查按钮是否有指向“向上”的箭头，如果有，则将其替换为“向下”，反之亦然。

    $(document).ready(function(){
        $("button").click(function(){
            if ($(this).text() == 'up'){
                $(this).html('&#8595;')
            }else{
                $(this).html('up');
            }
            $("p").slideToggle();
        });
    });

https://jsfiddle.net/gogaa33d/

Answer 5

使用$("button").text('Button Clicked');更改按钮文本

$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
    $("button").text('Button Clicked');
  });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<button>&#8595;</button>
<p>Wow!</p>

</body>
</html>

Answer 6

试试这个会起作用：

更改html content上的slideToggle()按钮。

Html：

<button id="up">&#8593;</button>
<p>Wow!</p>

JQuery：

$(document).ready(function(){
    $("button").click(function(){
   var arrowId = $(this).attr('id');
   if (arrowId == 'up') {
     $("button").html('&#8595');
     $(this).attr('id','down');
     } else {
     $("button").html('&#8593');
     $(this).attr('id','up');
     }
        $("p").slideToggle();
    });
});

演示： https://jsfiddle.net/64a6fafh/1/

Answer 7

基于上述@Jorrex's answer的建议。

您也可以使用例如按钮的类而不是变量：

＆＃13;

$("button").click(function() {
  if (!$(this).hasClass('toggled')) {
    $(this).html("&#8593;");
  } else {
    $(this).html("&#8595;");
  }
  $(this).toggleClass('toggled');
  $("p").slideToggle();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  &#8595;
</button>
<p>
  Wow!
</p>

＆＃13;

这样，如果在同一页面上需要多个这样的按钮，那就容易多了。

修改：即使您不打算在网页上使用多个此类按钮，也不会在此处使用变量更安全，因为 $(document).ready(function(){内的任何其他功能可能会干扰该变量 - 并且会浪费你的时间来弄清楚为什么＆＃34;那些奇怪的东西＆＃34; （见this example）正在发生。（虽然在该示例中错误可能看起来很明显，但是当代码库增长时，这些错误变得更加难以发现。）

Answer 8

我的回答基于Jorrex's answer。我很擅长使代码简短易读。简单的逻辑应该是简单的代码。 IMO下一个示例更容易阅读，特别是如果您的文件中有大量代码。

此外，您可以轻松地使用普通的Javascript，使其更轻量级。

var toggled = false;
$("button").click(function() {
    this.innerHTML = !toggled ? "&#8593;" : "&#8595;";

    toggled = !toggled; // flip the value
    $("p").slideToggle();
});

如何更改我的按钮文字？

8 个答案: