js侧边栏拖拽和点击隐藏

基础概念

侧边栏拖拽：允许用户通过鼠标拖动来改变侧边栏的位置或大小。 点击隐藏：用户可以通过点击某个按钮或区域来隐藏侧边栏。

类型

固定侧边栏：始终显示在屏幕的一侧。
可拖拽侧边栏：用户可以通过拖动来改变其位置或大小。
点击隐藏侧边栏：用户可以通过点击按钮或区域来显示或隐藏侧边栏。

应用场景

仪表盘应用：如项目管理工具、数据分析平台等。
社交媒体应用：如聊天应用、新闻阅读器等。
办公软件：如文字处理软件、表格编辑器等。

实现示例

以下是一个简单的JavaScript示例，展示如何实现侧边栏的拖拽和点击隐藏功能。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sidebar Example</title>
    <style>
        #sidebar {
            width: 250px;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #333;
            transition: transform 0.3s ease-in-out;
        }
        #sidebar.hidden {
            transform: translateX(-100%);
        }
        #content {
            margin-left: 250px;
            padding: 20px;
        }
        #toggleButton {
            cursor: pointer;
            padding: 10px;
            background-color: #555;
            color: white;
            position: fixed;
            top: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
    <div id="sidebar">
        <!-- Sidebar content -->
    </div>
    <div id="toggleButton">Toggle Sidebar</div>
    <div id="content">
        <!-- Main content -->
    </div>

    <script>
        const sidebar = document.getElementById('sidebar');
        const toggleButton = document.getElementById('toggleButton');

        let isDragging = false;
        let startX, startLeft;

        // Click to toggle sidebar visibility
        toggleButton.addEventListener('click', () => {
            sidebar.classList.toggle('hidden');
        });

        // Drag functionality
        sidebar.addEventListener('mousedown', (e) => {
            isDragging = true;
            startX = e.clientX;
            startLeft = parseInt(document.defaultView.getComputedStyle(sidebar).left, 10);
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            const offsetX = e.clientX - startX;
            sidebar.style.left = `${startLeft + offsetX}px`;
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

问题1：拖拽时侧边栏移动不流畅

原因：可能是由于事件监听器没有正确处理或样式过渡效果导致的。

解决方法：

确保mousemove事件监听器正确处理位置变化。
使用CSS过渡效果（如transition）来平滑移动。

问题2：点击隐藏功能失效

原因：可能是由于事件绑定错误或类名切换不正确。

解决方法：

检查toggleButton的事件监听器是否正确绑定。
确保在点击时正确切换hidden类名。

通过以上示例和解决方案，可以实现一个基本的侧边栏拖拽和点击隐藏功能，并解决常见的问题。

页面内容是否对你有帮助？

有帮助

没帮助

jquery移动侧边栏未预期拖动

、、、

我正在开发一个phonegap应用程序，它在页面后面有一个固定的侧边栏，我发现了一个行为问题。如果用户想要关闭菜单，他必须将页面的可见部分拖到左侧。我的问题是，在侧边栏中，我有一个可以垂直滚动的块。它工作得很好，但问题是，如果我把.scroll (overflow-y: scroll；-webkit

浏览 1提问于2014-03-11得票数 0

1回答

用于切换侧边栏的js函数

、、

我想使用css (或) js来显示/隐藏我的博客侧边栏。当访问者点击按钮时，让我的侧边栏显示/隐藏的最佳选择是什么？您可以在侧边栏上看到等待添加此功能的站点实时显示:无$(document).

浏览 0提问于2015-03-10得票数 1

2回答

文本框聚焦时如何隐藏div？

、、、

我有一个侧边栏，它的表现很好，直到我点击身体。当输入集中在侧边栏内，同时由于主体的输入框焦点而被聚焦时，这个侧边栏应该隐藏或点击主体，它应该隐藏在动作上。{

浏览 4提问于2013-06-21得票数 1

2回答

div display，css @media vs javascript

、、

对于我的第一个响应设计，我使用css @media和display: none；或display:table-cell来显示或隐藏侧栏。这很好，我需要显示:三个div布局的表格单元格。div_right { display: table-cell; }JS是标准的ToogleDisplay函数( e.style.display = "table-cell"；代替e

浏览 7提问于2014-10-23得票数 0

回答已采纳

1回答

Google控制台不允许日志级别更改

我的Chrome控制台不允许我调整日志级别并关闭这些可怕的违规行为；该选项已被禁用。为什么？

浏览 0提问于2018-10-09得票数 14

回答已采纳

1回答

关闭div时，单击外部有角的div。

、、、

当我单击div外部时，当我想关闭div时，jquery就是这样的。 if (e.target.id != "user-login-top" && !$(e.target).closest("#user-login-wrapper").length) { } });

浏览 6提问于2014-12-26得票数 0

5回答

带靴带的侧杆塌陷

、、

我刚刚访问了这个页面，，并想知道是否有可能构建左侧侧边栏折叠与引导3。将侧边栏从顶部折叠的代码(仅限电话)： <span class="glyphi

浏览 10提问于2013-10-16得票数 106

回答已采纳

1回答

关闭带有数据的导航栏--点击切换=“offcanvas”不起作用

、、

我有一个侧边导航，在小型设备上可以很好地从左侧切换。一切都很完美，除了当你点击侧边栏中的一个链接时；我不想用导航栏来隐藏和显示内容div，但是它被卡住了，你必须点击切换按钮来删除侧边栏。我应该怎么做才能让导航栏在不使用折叠的情况下在单击时消失？<div class="bar1"></div> <div class="bar

浏览 1提问于2018-05-03得票数 0

1回答

Javascript onclick菜单按钮显示边栏，onmouseleave隐藏边栏

我有一个默认情况下隐藏的侧边栏和一个触发侧边栏的菜单按钮。到目前为止，一切都正常，但我想要的是，当我点击菜单时，侧边栏被打开，鼠标离开时，侧边栏被关闭。下面是我的html和js<div id="wrapper"> <!

浏览 18提问于2016-08-24得票数 0

回答已采纳

2回答

如果在外部单击，请隐藏/toggle

、、

当我在移动模式下打开模板时，它会显示一个图标(菜单图标)，当我单击它时，它会显示侧边栏。现在，当我单击div外部时，理想情况下它应该隐藏侧栏(自动切换)，但它没有。请让我知道如何处理/实现它。click(function(e) { $("#wrapper").toggleClass("active");此外，如果您有任何固定的边栏演示在引导

浏览 3提问于2014-03-26得票数 0

回答已采纳

1回答

板看起来不一样

我有5个板子，突然间，一个看起来和其他的不一样了，就像以前一样。它现在在屏幕的左边有一个深蓝色的横幅，可以让你点击标题名称来获取列表并在它们之间移动。右侧不再有灰色横幅显示董事会成员、过滤卡和最近在董事会上的活动。我怎么才能让它回到原来的样子？我需要在屏幕右边的灰色横幅。

浏览 0提问于2012-09-04得票数 10

1回答

在vue 2中单击“外部”后隐藏元素

、

我试图隐藏一个侧边栏后，点击外面使用Vue 2和拉拉。这个侧边栏是在navbar组件中创建的。首先，我添加了一个@click="showSidenav = !还添加了一个关闭锚标记来隐藏侧边栏。工作实际上很好，但当事情出现在我的脑海中，如何也隐藏它时，点击外部的侧边栏？

浏览 5提问于2017-07-06得票数 2

回答已采纳

1回答

如何隐藏bootstrap侧边栏的一部分？

、、、、

我想从'vue-bootstrap‘创建一个侧边栏，它在点击时被隐藏，但我想只隐藏这个侧边栏宽度的80%，那么，如何只隐藏侧边栏的一部分？:options="variants"></b-form-select> </div> </b-

浏览 34提问于2021-02-25得票数 0

2回答

试着阻止身体被放置在侧边栏下面

、、

我要做的是，当侧边栏旁边的身体没有足够的空间时，阻止身体在侧边栏下移动。(调整浏览器的大小以查看效果)--点击小提琴链接，例如正在发生的事情。

浏览 2提问于2011-12-23得票数 1

回答已采纳

1回答

在标记(或点)外单击以关闭Mapbox上的内容

、

'Point', function (e) { }); 这段代码意味着当我点击layer id: 'Point'时，侧边栏就会显示出来。$(".page-wrapper").removeClass("toggled");/*hide sidebar*/ 这段代

浏览 14提问于2019-01-26得票数 0

1回答

隐藏显示右侧栏(&S)

、、、

因此，我正在尝试创建一个javascript或查询来隐藏右侧边栏div。事实证明，这比我预期的要难得多，但我已经接近了。我已经创建了一个隐藏/显示右侧侧边栏，当单击时滑出，然后再次单击按钮时滑回全宽。问题:单击“隐藏”时:侧边栏滑出为'width:10px;‘，内容为右边距:10px；单击"SHow"：侧边栏滑入为'width:200px;’，内容滑

浏览 2提问于2012-04-05得票数 1

6回答

如何在iOS模拟器中滚动mac图书空气？

、、、、

我有一个滚动视图和一个嵌入的UIImageView。代码是正确的，但我无法在模拟器中滚动，因为我有一个触控板，而不是鼠标。或者我可以吗？

浏览 1提问于2014-01-31得票数 27

2回答

侧边栏平顺

、、、

我创建了一个边栏，当屏幕变小时，它会崩溃。然后一个按钮出现打开/关闭它。我用一种很好的方式来隐藏/显示侧边栏。一切都安排好了。css和一些代码在layout.js中。

浏览 2提问于2013-10-12得票数 0

回答已采纳

1回答

语义用户界面对侧栏OnHide的反应

、、、

我正在使用一个完整的页面侧边栏，在语义UI中，与更多的用户做出反应。除了Safari和iOS (iPad/iPhone)等设备，它在所有设备上都运行得很好。我遇到的问题是，通常触发被调用的"onHide“函数的点击事件似乎并不适用于苹果设备。如果您导航到Semantic的文档中的一个暗淡的侧边栏，它也会出现在这个例子中：切换昏暗的侧边栏以显示在您的计算机/

浏览 0提问于2018-09-15得票数 0

1回答