带有滑动下拉菜单的 JavaScript 本地存储

Question

我在一个网站上工作，我对 javascript 很陌生。我有 6 个按钮，当它们被按下时，它们会向下滑动一个带有数据的下拉菜单。当按下一个时，它会收回所有其他的以占用相同的空间。它运行良好，这就是我用我的 javascript 知识设法做到的。我现在需要这些下拉菜单来记住当页面用本地存储刷新时它们所处的位置。我在网上找到了一些本地存储的例子，但在过去的几天里，我尝试了其中的 30 个，但无法满足我的需求。我真的坚持如何在页面刷新时合并本地存储以记住这些下拉列表的位置。

    $(document).ready(function() {
    $("#flippy2").click(function() {
        $("#flippanel2").slideToggle("normal");
        if ($("#flippanel")[0].style.display != "none") {
            $("#flippanel").slideToggle();
        }
        if ($("#flippanel3")[0].style.display != "none") {
            $("#flippanel3").slideToggle();
        }
        if ($("#flippanel4")[0].style.display != "none") {
            $("#flippanel4").slideToggle();
        }
        if ($("#flippanel5")[0].style.display != "none") {
            $("#flippanel5").slideToggle();
        }
        if ($("#flippanel6")[0].style.display != "none") {
            $("#flippanel6").slideToggle();
        }
        if ($("#flippanel7")[0].style.display != "none") {
            $("#flippanel7").slideToggle();
        }
        if ($("#flippanel8")[0].style.display != "none") {
            $("#flippanel8").slideToggle();
        }
        if ($("#flippanel9")[0].style.display != "none") {
            $("#flippanel9").slideToggle();
        }
    });
});

$(document).ready(function() {
    $("#flippy3").click(function() {
        $("#flippanel3").slideToggle("normal");
        if ($("#flippanel4")[0].style.display != "none") {
            $("#flippanel4").slideToggle();
        }
        if ($("#flippanel5")[0].style.display != "none") {
            $("#flippanel5").slideToggle();
        }
        if ($("#flippanel6")[0].style.display != "none") {
            $("#flippanel6").slideToggle();
        }
        if ($("#flippanel7")[0].style.display != "none") {
            $("#flippanel7").slideToggle();
        }
        if ($("#flippanel8")[0].style.display != "none") {
            $("#flippanel8").slideToggle();
        }
        if ($("#flippanel9")[0].style.display != "none") {
            $("#flippanel9").slideToggle();
        }
    });
});

$(document).ready(function() {
    $("#flippy4").click(function() {
        $("#flippanel4").slideToggle("normal");
        if ($("#flippanel3")[0].style.display != "none") {
            $("#flippanel3").slideToggle();
        }
        if ($("#flippanel5")[0].style.display != "none") {
            $("#flippanel5").slideToggle();
        }
        if ($("#flippanel6")[0].style.display != "none") {
            $("#flippanel6").slideToggle();
        }
        if ($("#flippanel7")[0].style.display != "none") {
            $("#flippanel7").slideToggle();
        }
        if ($("#flippanel8")[0].style.display != "none") {
            $("#flippanel8").slideToggle();
        }
        if ($("#flippanel9")[0].style.display != "none") {
            $("#flippanel9").slideToggle();
        }
    });
});

$(document).ready(function() {
    $("#flippy5").click(function() {
        $("#flippanel5").slideToggle("normal");
        if ($("#flippanel3")[0].style.display != "none") {
            $("#flippanel3").slideToggle();
        }
        if ($("#flippanel4")[0].style.display != "none") {
            $("#flippanel4").slideToggle();
        }
        if ($("#flippanel6")[0].style.display != "none") {
            $("#flippanel6").slideToggle();
        }
        if ($("#flippanel7")[0].style.display != "none") {
            $("#flippanel7").slideToggle();
        }
        if ($("#flippanel8")[0].style.display != "none") {
            $("#flippanel8").slideToggle();
        }
        if ($("#flippanel9")[0].style.display != "none") {
            $("#flippanel9").slideToggle();
        }
    });
});

$(document).ready(function() {
    $("#flippy6").click(function() {
        $("#flippanel6").slideToggle("normal");
        if ($("#flippanel3")[0].style.display != "none") {
            $("#flippanel3").slideToggle();
        }
        if ($("#flippanel4")[0].style.display != "none") {
            $("#flippanel4").slideToggle();
        }
        if ($("#flippanel5")[0].style.display != "none") {
            $("#flippanel5").slideToggle();
        }
        if ($("#flippanel7")[0].style.display != "none") {
            $("#flippanel7").slideToggle();
        }
        if ($("#flippanel8")[0].style.display != "none") {
            $("#flippanel8").slideToggle();
        }
        if ($("#flippanel9")[0].style.display != "none") {
            $("#flippanel9").slideToggle();
        }
    });
});

$(document).ready(function() {
    $("#flippy7").click(function() {
        $("#flippanel7").slideToggle("normal");
        if ($("#flippanel3")[0].style.display != "none") {
            $("#flippanel3").slideToggle();
        }
        if ($("#flippanel4")[0].style.display != "none") {
            $("#flippanel4").slideToggle();
        }
        if ($("#flippanel5")[0].style.display != "none") {
            $("#flippanel5").slideToggle();
        }
        if ($("#flippanel6")[0].style.display != "none") {
            $("#flippanel6").slideToggle();
        }
        if ($("#flippanel8")[0].style.display != "none") {
            $("#flippanel8").slideToggle();
        }
        if ($("#flippanel9")[0].style.display != "none") {
            $("#flippanel9").slideToggle();
        }
    });
});

$(document).ready(function() {
    $("#flippy8").click(function() {
        $("#flippanel8").slideToggle("normal");
        if ($("#flippanel3")[0].style.display != "none") {
            $("#flippanel3").slideToggle();
        }
        if ($("#flippanel4")[0].style.display != "none") {
            $("#flippanel4").slideToggle();
        }
        if ($("#flippanel5")[0].style.display != "none") {
            $("#flippanel5").slideToggle();
        }
        if ($("#flippanel6")[0].style.display != "none") {
            $("#flippanel6").slideToggle();
        }
        if ($("#flippanel7")[0].style.display != "none") {
            $("#flippanel7").slideToggle();
        }
        if ($("#flippanel9")[0].style.display != "none") {
            $("#flippanel9").slideToggle();
        }
    });
});

$(document).ready(function() {
    $("#flippy9").click(function() {
        $("#flippanel9").slideToggle("normal");
        if ($("#flippanel3")[0].style.display != "none") {
            $("#flippanel3").slideToggle();
        }
        if ($("#flippanel4")[0].style.display != "none") {
            $("#flippanel4").slideToggle();
        }
        if ($("#flippanel5")[0].style.display != "none") {
            $("#flippanel5").slideToggle();
        }
        if ($("#flippanel6")[0].style.display != "none") {
            $("#flippanel6").slideToggle();
        }
        if ($("#flippanel7")[0].style.display != "none") {
            $("#flippanel7").slideToggle();
        }
        if ($("#flippanel8")[0].style.display != "none") {
            $("#flippanel8").slideToggle();
        }
    });
});
</script>

编辑： 基于评论的新代码尝试

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div>
            <div style="position: relative; left: 20%;" class='div-toggle' id='flippy'>
                click me1
            </div>
            <div style="position: relative; left: 20%;" class='div-toggle' id='flippy2'>
                click me2
            </div>
            <div style="position: relative; left: 20%;" class='div-toggle' id='flippy3'>
                click me3
            </div>
        </div>


<script>
    $(document).ready(function() {
      let first = localStorage.getItem('open-toggle');
      if (first) $(`#${first}`).trigger('click');
      $(".div-toggle").click(function() {
        $(".div-toggle").not(this).slideToggle("normal");
        localStorage.setItem('open-toggle', $(this).attr('id'))
      })
    })
</script>




    <script>
$("#flippanel").hide();
$("#flippanel2").hide();
$("#flippanel3").hide();

$(document).ready(function() {
    $("#flippy").click(function() {
        $("#flippanel").slideToggle("normal");
        if ($("#flippanel2")[0].style.display != "none") {
            $("#flippanel2").slideToggle();
        }
        if ($("#flippanel3")[0].style.display != "none") {
            $("#flippanel3").slideToggle();
        }
    });
});

    $(document).ready(function() {
        $("#flippy2").click(function() {
            $("#flippanel2").slideToggle("normal");
            if ($("#flippanel")[0].style.display != "none") {
                $("#flippanel").slideToggle();
            }
            if ($("#flippanel3")[0].style.display != "none") {
                $("#flippanel3").slideToggle();
            }
        });
    });

    $(document).ready(function() {
        $("#flippy3").click(function() {
            $("#flippanel3").slideToggle("normal");
            if ($("#flippanel")[0].style.display != "none") {
                $("#flippanel").slideToggle();
            }
            if ($("#flippanel2")[0].style.display != "none") {
                $("#flippanel2").slideToggle();
            }
        });
    });
</script>

Answer 1

此代码段显示了几件事：如何根据您的规格正确打开和关闭开关。它还展示了如何将打开的切换存储在 localStorage 中，在页面加载和触发时找到它。这些部分被注释掉，因为它们在代码段沙箱中失败 - 但在您的代码和测试中取消注释。

$(document).ready(function() {
 // let first = localStorage.getItem('open-toggle');
 // if (first) $(`#${first}`).trigger('click');
  $(".div-toggle").click(function() {
    $(".div-toggle").not(this).slideToggle("normal");
   // localStorage.setItem('open-toggle', $(this).attr('id'))
  })
})

.div-toggle {
  padding: 20px;
  text-align: center;
  background: #333;
  color: #fff;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class='div-toggle' id='flippy1'>
    click me
  </div>

  <div class='div-toggle' id='flippy2'>
    click me
  </div>

  <div class='div-toggle' id='flippy3'>
    click me
  </div>
</div>