需要显示然后使用jquery隐藏链接

Question

我有一些文字说（显示地图步骤），当点击时，向下滑动一个div，其中包含与地图交互的信息。在div滑下之后，我想更改文本说“隐藏地图步骤”，点击后会将所有内容都备份。

它主要起作用。我将“隐藏地图步骤”设置为显示：无，但您不能将其用作链接以将所有内容重新添加。

这是我正在使用的代码：

$(".stepsLink").click(function () {
$(".stepsLink").hide();
$(".stepsUpLink").show();
if ($(".steps").is(":hidden")) {
  $(".steps").slideDown("fast", "linear");
} else {
  $(".steps").slideUp("fast", "linear");
}
});

stepsUpLink显示自身，但无法点击以将div重新滑动。

这是我的jsfiddle链接：http://jsfiddle.net/ltdesign/5b6XS/

有任何帮助吗？谢谢！

Answer 1

将第一行更改为：
    $(".stepsLink, .stepsUpLink").click(function () {

Answer 2

$(document).ready(function(){
    $(".stepsLink").click(function () {
        if ($(".steps").is(":hidden")) {   
            $(".steps").slideDown("fast", "linear", function(){
              $(".stepsLink").html('hide map steps <i class="icon-caret-down"></i>');
            });
        } else {
            $(".steps").slideUp("fast", "linear", function(){
                $(".stepsLink").html('show map steps <i class="icon-caret-down"></i>');
            });
        }                 
      });
});

Working demo

Answer 3

您在stepsLink范围内只有click事件，而不是在stepsUpLink上 - 它不处理点击。

Answer 4

@jqueryrocks有一个很好的方法，只需要一点点调整。将您的节目隐藏移动到条件中，以便标签在单击后正确显示。

$(".stepsLink, .stepsUpLink").click(function () {

    if ($(".steps").is(":hidden")) {
        $(".stepsLink").hide();
        $(".stepsUpLink").show();
        $(".steps").slideDown("fast", "linear");
    } else {
        $(".stepsUpLink").hide();
        $(".stepsLink").show();
        $(".steps").slideUp("fast", "linear");
    }
  });