显示隐藏DIV与JQuery的

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保持隐藏状态，但只有当用户点击按钮时才会出现。

的我想有成就的是什么此页上的例子可以在constantcontact.com找到。看看页脚，你会看到它滑出视图，但按钮仍然可见。

任何帮助将不胜感激。

谢谢大家。

Answer 1

$(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 2

1. 您可以使用if ($('#showHideBox').is(':visible') == True) {/*change text*/} else {/*change text*/}更改文本以根据需要显示/隐藏。
2. 你想把显示/隐藏按钮，你躲在箱子外面。
3. 您可以使用cookie或会话或Local Storage来存储需要跨页面加载坚持信息。您需要将该框的初始状态设置为在页面加载时显示/隐藏。

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

因此，要做到这一点，最简单的方法（IMO）是创建一个容器，你的按钮+盒（您想隐藏）。你的按钮会一直保持。当页面加载时，我们将一个事件附加到您的按钮上，该事件将根据框的当前状态（如果它隐藏，显示它，如果它是可见的，隐藏它）显示和隐藏您的框。

很容易。

现在，你也想坚持网页加载/访问页面之间的可见光/隐藏状态。要做到这一点，你需要在用户的浏览器上添加一个cookie（注意，如果你的用户登录了或者其他的东西，你可以用另一种方式做到这一点 - 但是一个cookie是最简单的方法来完成它， t涉及将数据保存到数据库的服务器往返）。

为了做到这一点，我建议去使用jQuery Cookie Plugin，它的使用非常简单（正如你将在下面看到的那样），并且在处理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 5

1. 我已经改变了代码从following幻灯片效果教程自由地在 隐藏和显示了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')) { 
   
       } 
   
   }); 
   

Answer 6

如何使用jQuery & Java脚本

的$（document）隐藏&显示标签。 ready（function（）{（“＃purchase_order”）。click（function（）{（“。salep”）。hide（）; $（ “saleo。”）显示（）。 $（“＃purchase_order”）。hide（）; $（“＃sale_order”）。show（）; }）;