使用Jquery显示隐藏DIV

我有一个简单的jqueryshow/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>

$（文档）.ready（函数（）{
$（'#showHideBox'）.show（）；
$（“#显示隐藏切换”）。单击（函数（）{
$（“#显示隐藏切换”）.text（“显示我”）
$（#showHideBox'）。滑动切换（250）；
返回false；
});
});

我正在寻找一种方法，将锚定标记上的文本更改为show/hide。 我知道这已经被问过很多次了。但我似乎找不到我的脚本的具体示例，到目前为止，文本在单击时会更改，但在随后的单击中不会更改

脚本通过将div滑出视图来隐藏它，但是，我需要div上的一部分可见，这样我就可以附加用户将单击的按钮（锚定）标记

最后，当用户单击“隐藏”时，div滑出视图，只有在用户刷新页面时才会重新出现。如何使div保持隐藏，但仅在用户单击按钮时显示

我正在努力完成的一个例子就在这一页上，可以在上找到。看看页脚，你会看到它滑出了视图，但按钮仍然可见

任何帮助都将不胜感激

谢谢大家

$(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）{/*更改文本*/}或者{/*更改文本*/}

根据需要更改要显示/隐藏的文本

您需要将“显示/隐藏”按钮放在要隐藏的框的外面

您可以使用cookie或会话，也可以存储需要跨页面加载持久化的信息。加载页面时，需要将框的初始状态设置为“显示/隐藏”

---

要保存状态，您需要使用服务器端代码或cookie。

因此，要实现这一点，最简单的方法（imo）是为您的按钮+框（要隐藏）创建一个容器。你的按钮将始终保持不变。当页面加载时，我们会在按钮上附加一个事件，该事件将根据框的当前状态显示和隐藏框（如果隐藏，则显示，如果可见，则隐藏）

很简单

现在，您还希望在页面加载/页面访问之间保持可见/隐藏状态。要做到这一点，您需要在用户的浏览器上安装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>

点击这里隐藏

显示和隐藏的文本，呜
$（文档）.ready（函数（）
{
var$ShowHideBox=$（'#ShowHideBox'）.hide（），
$ShowHideButton=$（“#ShowHideButton”）；
/*根据用户浏览器中cookie的状态初始化该框*/
initBox（）；
$（“#显示隐藏按钮”）。单击（函数（）{
if（boxVisible（））
{
//盒子是可见的。让我们隐藏它。
营养不良（）；
}
其他的
{
//盒子是看不见的，拿出来。
陈列柜（）；
}
});
函数initBox（）
{
//如果曲奇说这是可见的，而不是…显示出来
如果（$.cookie（'BoxVisible'）&&！BoxVisible（））
{
陈列柜（）；
}
//如果曲奇说这是不可见的，它是…隐藏它
else if（！$.cookie（'BoxVisible'）&&BoxVisible（））
{
营养不良（）；
}
}  
//检查该框当前是否可见
函数boxVisible（）
{
返回$ShowHideBox.hasClass（'hidden'）？false:true；
}
//显示框，更改按钮文本，并设置cookie
函数显示框（）
{
$ShowHideBox.slideUp（250）.removeClass（'hidden'）；
$ShowHideButton.html（“单击此处隐藏！”）；
$.cookie（'BoxVisible'，1，{expires:365}）；
}
//隐藏该框，更改按钮文本，并设置cookie
函数hideBox（）
{
$ShowHideBox.slideDown（250）.addClass（'hidden'）；
$ShowHideButton.html（“单击此处显示！”）；
$.cookie（'BoxVisible'，0，{expires:365}）；
}
});

我已将幻灯片效果教程中的代码更改为替代 在JQuery单击事件上隐藏和显示锚定标记

下面代码的工作示例如下所示：

如何使用Jquery和java脚本隐藏和显示标记 $（文档）.ready（函数（）{ $（“#采购订单”）。单击（函数（）{ $（“.salep”）.hide（）； $（“.saleo”）.show（）； $（“#采购订单”）.hide（）； $（“#销售订单”）.show（）； });

---

这不是比它需要的更复杂吗？如果他想将按钮设置为某个高度以保持按钮可见，那么使用is visible将不起作用——但是的，这可能不是最好的方法！#“is indicate id”。“indicate classe”这样你就可以调整类中的div和id中的按钮

<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>

$(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')) {

    }

});