我有这个简单的JQuery Show / Hide功能，显然可以显示和隐藏div。 有三件事我不能自己做。
<script type="text/javascript">
$(document).ready(function() {
$('#showHideBox').show();
$('#showHidetoggle').click(function() {
$("#showHidetoggle").text("Show me")
$('#showHideBox').slideToggle(250);
return false;
});
});
</script>
<a href="#" id="showHidetoggle">Hide Me</a>
我正在寻找一种方法来更改锚标记上的文字以显示/隐藏。 我知道以前曾经多次询问过这个问题。但是我似乎无法在我的脚本中找到具体的示例，到目前为止，文本会在点击时发生变化，而不是随后的点击。
该脚本通过将div滑出视图来隐藏div，但是，我需要div上的一部分可见，这样我就可以附加用户将单击的按钮（锚）标记。
最后，当用户点击隐藏时，div会滑出视图，只有在用户刷新页面时才会重新显示。如何使div保持隐藏状态，但仅在用户单击按钮时显示？
我想要完成的一个例子就是在constantcontact.com上可以找到这个页面。看看页脚，你会看到它滑出视图但按钮仍然可见。
非常感谢任何帮助。
谢谢大家。
答案 0 :(得分：6)
所以，要实现这一点，最简单的方法（imo）是为你的按钮+框创建一个容器（你要隐藏它）。您的按钮将永远保持不变。当页面加载时，我们会在您的按钮上附加一个事件，该事件将根据框的当前状态显示和隐藏您的框（如果它被隐藏，显示它，如果它是可见的，则隐藏它）。
够容易。
现在，您还希望在页面加载/页面访问之间保持可见/隐藏状态。要做到这一点，你需要在用户的浏览器上使用一个cookie（旁注，如果你的用户已经登录或者其他东西，你可以用另一种方式做到这一点 - 但是cookie是最简单的方法来完成它并且没有' t涉及服务器往返以将数据保存到数据库中。）
为了做到这一点，我建议去jQuery Cookie Plugin使用它非常简单（正如你将在下面看到的那样）并且在处理cookie时会遇到很多麻烦。每次用户单击按钮并更改框的状态时，您将向用户的浏览器写入cookie并存储框的当前状态。这样，当用户重新加载页面时，您将知道当前状态是什么（因为cookie）。在下面的示例中，我将cookie设置为在一年内过期，但如果需要，您可以更改它。
<div id="ShowHideContainer">
<p><a id="ShowHideButton">Click Here To Hide!</a></p>
<div id="ShowHideBox">text that gets shown and hidden, woo</div>
</div>
<script>
$(document).ready(function()
{
var $ShowHideBox = $('#ShowHideBox').hide(),
$ShowHideButton = $('#ShowHideButton');
/* Initialize the box based on the state of the cookie in the user's browser*/
initBox();
$('#ShowHideButton').click(function() {
if (boxVisible())
{
//the box is visible. lets hide it.
hideBox();
}
else
{
//the box is invisible. show it.
showBox();
}
});
function initBox()
{
//if the cookie says this is visible, and it's not...show it
if ( $.cookie('BoxVisible') && ! boxVisible() )
{
showBox();
}
//if the cookie says this is not visible, and it is...hide it
else if ( ! $.cookie('BoxVisible') && boxVisible() )
{
hideBox();
}
}
//check to see if the box is visible or not, currently
function boxVisible()
{
return $ShowHideBox.hasClass('hidden')? false : true;
}
//show the box, change the button text, and set the cookie
function showBox()
{
$ShowHideBox.slideUp(250).removeClass('hidden');
$ShowHideButton.html("Click Here to Hide!");
$.cookie('BoxVisible', 1, {expires: 365});
}
//hide the box, change the button text, and set the cookie
function hideBox()
{
$ShowHideBox.slideDown(250).addClass('hidden');
$ShowHideButton.html("Click Here to Show!");
$.cookie('BoxVisible', 0, {expires: 365});
}
});
</script>
答案 1 :(得分：2)
我已将following幻灯片效果教程中的代码更改为备用a 隐藏并在JQuery点击事件上显示锚标记。
以下代码的工作示例可在此JSFiddle中找到：
$(document).ready(function () {
$("#hide").click(function () {
$(".target").hide("slide", {
direction: "up"
}, 500);
$('#show').show();
$('#hide').hide();
});
$("#show").click(function () {
$(".target").show("slide", {
direction: "up"
}, 500);
$('#show').hide();
$('#hide').show();
});
if ($('.target').is(':visible')) {
}
});
答案 2 :(得分：1)
$('#showHidetoggle').click(function() {
var boxText = $('#showHideBox').is(":visible") ? "Show me" : "Hide me";
$("#showHidetoggle").text(boxText);
$('#showHideBox').slideToggle(250);
return false;
});
要保存状态，您需要使用服务器端代码或使用cookie。
答案 3 :(得分：0)
$(document).ready(function() {
$('#showHideBox').show();
$('#showHidetoggle:not(.hideme)').click(function() {
$(this).html("Hide me").addClass("hideme");
$('#showHideBox').animate({height: '100px'}, 250); // Or whatever height you want
return false;
});
$('#showHidetoggle.hideme').click(function() {
$(this).html("Show me").removeClass("hideme");
$('#showHideBox').animate({height: '300px'}, 250); // Or whatever height it was orginally.
return false;
});
});
应该做的伎俩。
答案 4 :(得分：0)
if ($('#showHideBox').is(':visible') == True) {/*change text*/} else {/*change text*/}更改要显示/隐藏的文字。答案 5 :(得分：0)
$（document）.ready（function（）{ $（“＃purchase_order”）。click（function（）{ $（ “salep”）隐藏（）。 $（ “saleo。”）显示（）。 $（ “＃PURCHASE_ORDER”）隐藏（）。 $（ “＃sale_order”）显示（）。 }）;