javascript - 为什么我的滚动条与我想要的相反？-6ren

javascript - 为什么我的滚动条与我想要的相反？

转载作者：太空宇宙更新时间：2023-11-04 10:53:15

25

4

好的，这就是我正在尝试做的事情。我有一个包含元素列表的仪表板(仪表板 1、仪表板 2 等)。每当我点击其中一个时，我试图让它们每个都有一个下拉栏。这是我得到的:

这是一个.html

<html>
    <head>
        <title>Database</title>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="stylesheet" type="text/css" href="dashboard.css"/>
        <script src="scripts/jquery-1.12.0.min.js"></script>
        <script src="scripts/general.js"></script>
    </head>
    <body>
        <div id="header">
            <div class="logo"> 
                <a href="index.html"><img src="/images/whatever.png"/></a>
            </div>
        </div>

        <div id="container">
            <div class="sidebar">
                <ul id="nav">
                    <li><a class=selected href="#">Dashboard</a></li>
                    <li><a href="#">Dashboard 1</a></li>
                    <li><a href="#">Dashboard 2</a></li>
                    <li><a href="#">Dashboard 3</a></li>
                    <li><a href="#">Dashboard 4</a></li>
                </ul>
            </div>
            <div class="content">
                some content yay

                <div id="box">
                    <div class="box-top">News</div>
                    <div class="box-panel"> This is simple news lalal</div>
                </div>

            </div>

        </div>
    </body>
</html>

这里是 dashboard.css(注意，styles.css 在这里并不重要，主要用于不同的页面，所以我没有包括它):

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

div#dbheader {
    width: 100%;
    height: 50px;
    background-color: #010101;
    margin: 0 auto;
}


.logo a {
    margin-left: 5px;
}

div#container {
    width: 100%;
    margin: 0 auto;
}

.sidebar {
    width: 250px;
    height: 100%;
    background-color: #171717;
    float: left;
}

.content {
    width: auto;
    height: 100%;
    margin-left: 250px;
    background-color: #222;
    padding: 15px;
}

ul#nav li{

}


ul#nav li a{
    text-decoration: none;
    color: #aaa;
    display: block;
    padding: 10px;
    font-size: 0.8em;
    border-bottom: 1px solid;
    border-color: #111;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
     transition: 0.2s;
}

ul#nav li a:hover,
ul#nav li a:active{
    background-color:#030303;
    color: #fff;
    padding-left: 20px;
/*    margin-left: 5px;*/
}

ul#nav li a.selected {
    background-color: #030303;
    color: #fff;
}


div#box {
    margin-top: 15px;
}

div#box .box-top {
    color: #fff;
    text-shadow: 0px 0px 1px #000;
    padding: 5px;
    padding-left: 15px;
    background-color: #2980b9;
    font-weight: 300;
}

div#box .box-panel {
    padding: 15px;
    background-color: #fff;
    color: #999;
}

最后，这是我的 general.js 文件:

$(document).ready(function(){
   $("ul#nav li a.selected").click(function(){
      $("ul#nav li").slideToggle('fast');

   });
});

发生的事情是，我想单击侧边栏菜单的 a.selected 部分，然后我希望我已经拥有的侧边栏(只是为了看看它是否有效)快速向下滑动。但是发生的事情是，当我单击 a.selected(又名仪表板 1)时，整个侧边栏缩回到仪表板 1 中，仪表板侧边栏就消失了。所以它基本上做了与我想要的相反的事情。

有谁知道我该如何解决这个问题？

最佳答案

如果我正确理解了您的意图，这段代码应该可以完成工作:

$(document).ready(function(){
  $("ul#nav li a.selected").click(function(){
    $("ul#nav li:not(:first-child)").slideToggle('fast');
  });
});

关于javascript - 为什么我的滚动条与我想要的相反？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34844559/

25

4

0

文章推荐： python - 测试 SVN 连通性

文章推荐： python - 为 DateTimeField 设置最小值

文章推荐： html - 文本装饰颜色不适用

文章推荐： java - Java中杀死进程

PHP 与 .= 相反
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
JQuery find() 相反
我想从输入对象内部开始找到下一个表单元素。Find() 是查找子对象的绝佳函数。但是在父级中寻找相反的方法呢？
jquery 与 $(this) 相反
是否可以执行$(this)的相反操作？因此，它不是获取 this 元素，而是获取与 .sb-popular-thumb a 匹配但不包括 $(this) 的所有内容？请参阅下面的示例代码。我已用
javascript - 与词法 this 相反
这是一个关于术语的问题。考虑到有一个方法使用词法this: var foo = { method: function () { console.log(this, ' is the co
mysql - 与 "where in"相反
我想问你是否存在一个与 WHERE IN 相反的命令，我想选择数组中具有不同参数的所有行。 1 && id <> 2 && id <> 3"; // how can i do the same q
python - 获取列表切片的补码(相反)
是否有语法来获取不在给定切片内的列表元素？给定切片 [1:4] 很容易得到这些元素: >>> l = [1,2,3,4,5] >>> l[1:4] [2, 3, 4] 如果我想要列表的其余部分，我可以
javascript - 与推()相反；
这个问题在这里已经有了答案: How can I remove a specific item from an array? (138 个回答) 关闭8年前。 JavaScript push(); 方
如果一列为Null，则SQL返回Null(与COALESCE()相反)
在此先感谢您的帮助。这是一个很棒的社区，我在这里找到了许多编程答案。我有一个包含多个列的表，其中5个包含日期或null。我想编写一个本质上将5列合并为1列的sql查询，条件是如果5列中的1包含“N
jQuery 与 .hasClass() 相反？
我使用 hasClass() 在 if 语句中验证元素是否具有给定的类。如果元素没有给定的类，如何检查 if 语句？预先感谢您的回复。最佳答案为什么不简单地: if (!el.hasClass(
c++ - 与 const_cast 相反
我有一个 std::vector v我想防止进一步写入它。 C++ 编译器不接受这个 const std::vector& w = v; 但它接受这个 const std::vector& w = r
将数据帧重新排列到表格中，与 "melt"相反
这个问题已经有答案了: How to reshape data from long to wide format (14 个回答) 已关闭 7 年前。我有像这样的巨大数据框: SN = c(1:10
php - 将php代码转换为字符串，与eval()相反
如何将可调用(匿名函数)转换为字符串进行评估？我正在尝试在 phpunit 中编写使用 runkit 的单元测试覆盖方法。特别是，runkit_method_redefine() 需要一个字符串参数
Firebase pop() 与push() 相反？
我想实现一个堆栈(队列)，许多用户可以以 FILO 方式将其推送()，并且许多用户可以从中弹出()。是否有与 pop() 等效的方法来检索/删除列表的最后一项？例如: var popRef = f
protocols - 与无状态协议(protocol)相反？
我想知道“无状态协议(protocol)”的反面是什么。例如，鉴于 HTTP 是无状态的，那么像 FTP 这样的协议(protocol)是相反的/维护状态的协议(protocol)，我的假设是否正确？
PHP 与 array_filter 相反？
我对array_filter很熟悉，想往功能上想，但我想知道有没有办法保留被丢弃的值？例如，如果我有一个像这样的数组: 2; }); 结果将是:array( 3, 4 )。有没有办法保留丢弃的值
javascript - Javascript!==给出的结果与===相反
我已将色轮的图像加载到 Canvas 上，并且在数组中有一个色相值列表。我遍历 Canvas 上的每个像素，并删除匹配相同色相值的像素。该代码是: var element = document.ge
r - 与 dcast 相反
这个问题在这里已经有了答案: Repeat each row of data.frame the number of times specified in a column (10 个答案) 关闭
php - 将php代码转换为字符串，与eval()相反
如何将可调用(匿名函数)转换为字符串以进行评估？我正在尝试在使用 runkit 的 phpunit 中编写单元测试覆盖方法。特别是，runkit_method_redefine() 需要一个字符串参
PHP 与 array_filter 相反？
我对array_filter很熟悉，想往功能上想，但我想知道有没有办法保留被丢弃的值？例如，如果我有一个像这样的数组: 2; }); 结果将是:array( 3, 4 )。有没有办法保留丢弃的值
java - 字符串 .equals 相反
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关

首页

博学

6Ren·AI

商城

javascript - 为什么我的滚动条与我想要的相反？