使用 Jquery 显示隐藏 DIV

Question

我有这个简单的 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>

1. 我正在寻找一种方法来更改锚标记上的文本以显示/隐藏。 我知道这个问题以前已经被问过很多次了。但我似乎无法找到我的脚本的具体示例，到目前为止，文本会在单击时发生变化，但不会在后续单击时发生变化。

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

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

我试图完成的示例可以在 constantcontact.com 上找到。查看页脚，您会看到它滑出视图，但按钮仍然可见。

任何帮助将不胜感激。

谢谢大家。

Answer 1

因此，要实现此目的，最简单的方法（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>

Answer 2

1. 我已经更改了以下幻灯片效果教程中的代码以替代一个
   在 JQuery 单击事件上隐藏和显示锚标记。

   以下代码的工作示例可以在此 JSFiddle 中看到：

   $(文档).ready(function () {
   
       $("#hide").click(function () {
           $(".target").hide("幻灯片", {
               方向：“向上”
           }, 500);
           $('#show').show();
           $('#hide').hide();
       });
   
       $("#show").click(function () {
           $(".target").show("幻灯片", {
            方向：“向上”
           }, 500);
           $('#show').hide();
           $('#hide').show();
       });
   
   
       if ($('.target').is(':visible')) {
   
       }
   
   });
   

Answer 3

$('#showHidetoggle').click(function() {  
    var boxText = $('#showHideBox').is(":visible") ? "Show me" : "Hide me";
    $("#showHidetoggle").text(boxText);
    $('#showHideBox').slideToggle(250);
    return false;
});

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

Answer 4

$(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;
    });

});

应该做到这一点。

Answer 5

1. 您可以使用 if ($('#showHideBox').is(':visible') == True) {/*change text*/} else {/*change text*/} 来更改根据需要显示/隐藏的文本。
2. 您需要将显示/隐藏按钮放在您要隐藏的框之外。
3. 您可以使用 Cookie 或会话或本地存储来存储需要在页面加载时保留的信息。页面加载时，您需要将框的初始状态设置为显示/隐藏。

Answer 6

如何隐藏和隐藏使用 Jquery & 显示标签java脚本

<script>
 $(document).ready(function () {
     $("#purchase_order").click(function () {
         $(".salep").hide();
         $(".saleo").show();
         $("#purchase_order").hide();
         $("#sale_order").show();
  }); 
</script>