Question

如果您在这里查看开发网站：www.tmwlsh.co.uk/wlsh 你会看到有四个盒子。一旦你点击了下来每个框中的箭头，箭头变为向上箭头。更改箭头都是在jQuery中完成的，而'向上箭头div'基本上不存在于html中。

一旦箭头变为向下，我希望用户能够点击向上箭头重新隐藏div ..它有点令人困惑，但是如果你看看链接我肯定你会得到要旨。 www.tmwlsh.co.uk/wlsh

Answer 1

您正在寻找的可能是jQuery函数Toggle。

您可以在以下链接中找到它：http://api.jquery.com/toggle/

Answer 2

我会使用类和jQuery来实现这一目标。对于你的箭头，给它一个标准的背景图像，箭头指向下方。每次单击它时，将其类切换为“活动”，对于活动类，将其背景图像向上指向一个箭头。完成此操作后，您可以使用jquery切换相关框的扩展。例如;

// CSS
.arrow{background-image: url('downexample.png');}
.arrow.active{background-image: url('upexample.png');}

// jQuery
$('#arrow1').click(function(){
  $(this).toggleClass('active'); // toggle arrow direction
  $('#box1').toggleSlide(); // toggle expansion of the first box
})

Answer 3

我做过类似的事情，点击按钮更改文本并显示div，然后再次隐藏div并更改按钮文本。这是我已经完成的代码，因为我不知道你做了什么，你必须使用我的适应你的代码，下次也许向我们展示你的代码是个好主意。

 function showInfo(){
                     var divInfo = document.getElementById("colorInfo");
                     var btnInfo = document.getElementById("btnInfo");
                     if(divInfo.style.display == "none"){
                         divInfo.style.display="block";
                         btnInfo.textContent = "Hide Color Info";
                     }else{
                         divInfo.style.display="none";
                         btnInfo.textContent = "Show Color Info";
                     }
                }

是否可以使用替换的div来启动函数？

3 个答案: