个人中心
gpt4 book ai didi

javascript - 在我的情况下，如何保持 SlideToggle() 的状态？

转载 作者：行者123 更新时间：2023-12-01 02:57:07 25 4
gpt4 key购买 nike

我希望 javascript 函数 slipToggle() 保持其状态。目前，每次我刷新页面时，它都会丢失信息。我知道可以使用 cookie 或本地存储来完成，但我没有这样做..

如果有人可以向我展示如何在我的代码中实现解决方案，我将非常感激；

//toggle hide/show shout box
$(".close_btnn").click(function (e) {   
    //get CSS display state of .toggle_chat element
            var toggleState = $('.toggle_chat').css('display');
    //toggle show/hide chat box
    $('.toggle_chat').slideToggle();

    //use toggleState var to change close/open icon image
    if(toggleState == 'block')
    {
        $(".header div").attr('class', 'open_btnn');
    }else{
        $(".header div").attr('class', 'close_btnn');

    }


});

这是带有shoutbox的页面的HTML/PHP；

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
.shout_box {
background: #000000;
width: 260px;
overflow: hidden;
position: fixed;
bottom: 0;
right: 10px;
z-index:9;
}
.shout_box .header .close_btn {
background: url(close_btn.gif) no-repeat 0px 0px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .close_btn:hover {
background: url(close_btn.gif) no-repeat 0px -16px;
}

.shout_box .header .open_btn {
background: url(close_btn.gif) no-repeat 0px -32px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .open_btn:hover {
background: url(close_btn.gif) no-repeat 0px -48px;
}
.shout_box .header{
padding: 5px 3px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: bold;
color:#fff;
border: 1px solid rgba(0, 39, 121, .76);
border-bottom:none;
cursor: pointer;
}
.shout_box .header:hover{
background-color: #000000;
}
.shout_box .message_box {
background: #FFFFFF;
height: 200px;
overflow:auto;
border: 1px solid #CCC;
}
.shout_msg{
margin-bottom: 10px;
display: block;
border-bottom: 1px solid #F3F3F3;
padding: 0px 5px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
color:#7C7C7C;
}
.message_box:last-child {
border-bottom:none;
}
time{
    font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: normal;
float:right;
color: #D5D5D5;
}
.shout_msg .username{
margin-bottom: 10px;
margin-top: 10px;
}
.user_info input {
width: 98%;
height: 25px;
border: 1px solid #CCC;
border-top: none;
padding: 3px 0px 0px 3px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
font-weight: bold;
display: block;
}
-->
</style>

<script type="text/javascript" src="shoutbox/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

// load messages every 1000 milliseconds from server.
load_data = {'fetch':1};
//window.setInterval(function(){
 $.post('shoutbox/shout.php', load_data,  function(data) {
    $('.message_box').html(data);
    var scrolltoh = $('.message_box')[0].scrollHeight;
    $('.message_box').scrollTop(scrolltoh);
 });
//}, 1000);

//method to trigger when user hits enter key
$("#shout_message").keypress(function(evt) {
    if(evt.which == 13) {
            var iusername = "java";
            var imessage = $('#shout_message').val();
            post_data = {'username':iusername, 'message':imessage};

            //send data to "shout.php" using jQuery $.post()
            $.post('shoutbox/shout.php', post_data, function(data) {

                //append data into messagebox with jQuery fade effect!
                $(data).hide().appendTo('.message_box').fadeIn();

                //keep scrolled to bottom of chat!
                var scrolltoh = $('.message_box')[0].scrollHeight;
                $('.message_box').scrollTop(scrolltoh);

                //reset value of message box
                $('#shout_message').val('');

            }).fail(function(err) { 

            //alert HTTP server error
            alert(err.statusText); 
            });
        }
});

//toggle hide/show shout box
$(".close_btn").click(function (e) {
    //get CSS display state of .toggle_chat element
    var toggleState = $('.toggle_chat').css('display');

    //toggle show/hide chat box
    $('.toggle_chat').slideToggle();

    //use toggleState var to change close/open icon image
    if(toggleState == 'block')
    {
        $(".header div").attr('class', 'open_btn');
    }else{
        $(".header div").attr('class', 'close_btn');
    }


});
});

</script>
</head>

<body>
<div class="shout_box">
<div class="header">Shout Box <div class="close_btn">&nbsp;</div></div>
  <div class="toggle_chat">
  <div class="message_box">
    </div>
    <div class="user_info">

   <input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" /> 
    </div>
    </div>
</div>
</body>
</html>

最佳答案

以下是使用 localstorage 实现此操作的方法。

$(document).ready(function() {
var $shoutBox = $('#shout-box');
var isShoutBoxClosed = JSON.parse(localStorage.getItem('shoutBoxClosed'));
if(isShoutBoxClosed){
	$shoutBox.hide();
}	
//toggle hide/show shout box
$(".close_btn").click(function (e) {
	//save users preference on localstoage
	localStorage.setItem('shoutBoxClosed', true);
    //toggle show/hide chat box
  $shoutBox.slideToggle();

});
	
});
.shout_box {
background: #000000;
width: 260px;
overflow: hidden;
position: fixed;
bottom: 0;
right: 10px;
z-index:9;
}
.shout_box .header .close_btn {
background: url(close_btn.gif) no-repeat 0px 0px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .close_btn:hover {
background: url(close_btn.gif) no-repeat 0px -16px;
}

.shout_box .header .open_btn {
background: url(close_btn.gif) no-repeat 0px -32px;
float: right;
width: 15px;
height: 15px;
}
.shout_box .header .open_btn:hover {
background: url(close_btn.gif) no-repeat 0px -48px;
}
.shout_box .header{
padding: 5px 3px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: bold;
color:#fff;
border: 1px solid rgba(0, 39, 121, .76);
border-bottom:none;
cursor: pointer;
}
.shout_box .header:hover{
background-color: #000000;
}
.shout_box .message_box {
background: #FFFFFF;
height: 200px;
overflow:auto;
border: 1px solid #CCC;
}
.shout_msg{
margin-bottom: 10px;
display: block;
border-bottom: 1px solid #F3F3F3;
padding: 0px 5px 5px 5px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
color:#7C7C7C;
}
.message_box:last-child {
border-bottom:none;
}
time{
    font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
font-weight: normal;
float:right;
color: #D5D5D5;
}
.shout_msg .username{
margin-bottom: 10px;
margin-top: 10px;
}
.user_info input {
width: 98%;
height: 25px;
border: 1px solid #CCC;
border-top: none;
padding: 3px 0px 0px 3px;
font: 11px 'lucida grande', tahoma, verdana, arial, sans-serif;
}
.shout_msg .username{
font-weight: bold;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<div id="shout-box" class="shout_box">
<div class="header">Shout Box <div class="close_btn">X</div></div>
  <div class="toggle_chat">
  <div class="message_box">
    </div>
    <div class="user_info">

   <input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" /> 
    </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>	
</body>
</html>

这是上面代码片段的 jsbin https://jsbin.com/hewataz/edit?html,js,output

关于javascript - 在我的情况下，如何保持 SlideToggle() 的状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46651630/

25 4 0
文章推荐： jquery - 如何使用jquery过滤掉x类的 child
文章推荐： asp.net-mvc - 是时候开始将 IQueryable 而不是 IList 返回到我的 Web UI/Web API 层了吗？
文章推荐： genie - “ Sprite ”编程语言在 Puppy Linux 之外的使用
文章推荐： .net - 使用 .NET 项目文件和架构？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com