我有一个简单的JQuery显示/隐藏功能，可以明显地显示和隐藏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 上找到。查看页脚，您会看到它滑出视图，但按钮仍然可见。
任何帮助将不胜感激。
谢谢大家。
因此，要实现此目的，最简单的方法（imo）是为按钮+框（要隐藏）创建一个容器。 您的按钮将始终保持不变。 当页面加载时，我们会将一个事件附加到您的按钮上，该事件将根据框的当前状态显示和隐藏您的框（如果它被隐藏，则显示它，如果它可见，则隐藏它）。
足够简单。
现在，您还希望在页面加载/页面访问之间保持可见/隐藏状态。 为此，您将需要在用户的浏览器上安装一个cookie（旁注，如果您的用户已登录或其他方式，则可以以另一种方式执行此操作 - 但是cookie是最轻松的方式完成它，并且不涉及服务器往返将数据保存到数据库中）。
为了做到这一点，我建议去获取jQuery Cookie插件，它使用起来非常简单（如下所述），并且消除了处理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>
-
我更改了以下幻灯片效果教程中的代码以替代隐藏并显示 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')) { } });
$('#showHidetoggle').click(function() {
var boxText = $('#showHideBox').is(":visible") ? "Show me" : "Hide me";
$("#showHidetoggle").text(boxText);
$('#showHideBox').slideToggle(250);
return false;
});
若要保存状态，需要使用服务器端代码或使用 cookie。
$(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;
});
});
应该做这个伎俩。
- 您可以使用
if ($('#showHideBox').is(':visible') == True) {/*change text*/} else {/*change text*/}根据需要更改文本以显示/隐藏。 - 您需要将显示/隐藏按钮放在要隐藏的框之外。
- 您可以使用 Cookie 或会话或本地存储来存储需要在页面加载后保留的信息。您需要将框的初始状态设置为页面加载时显示/隐藏。
如何使用 Jquery 和 java 脚本隐藏和显示标签
<script>
$(document).ready(function () {
$("#purchase_order").click(function () {
$(".salep").hide();
$(".saleo").show();
$("#purchase_order").hide();
$("#sale_order").show();
});
</script>