时间戳

首页 > 解决方案 > 单击折叠按钮后，我想添加顶部 + 100，第二次单击应该是顶部 - 100

javascript - 单击折叠按钮后，我想添加顶部 + 100，第二次单击应该是顶部 - 100

问题描述

在此处输入图像描述这是图片这是 jQuery 我也尝试使用切换，但它无法正常工作

<script>
        $(document).ready(function () {
            $(".sidebar ul li").click(function () {
                $(this).siblings().find(':nth-child(1)').css("display", "none");
                $(this).addClass('margin').siblings().removeClass('margin');
                $(this).find(':nth-child(1)').css("display", "block");
            });


            $(".navbar-toggler-icon").click(function () {
                    $("#sidebar ul li").find(':nth-child(1)').css("top", "+=100px")
                }

            );
        })
    </script>

这是 html css 部分，希望在单击折叠按钮后添加 top+100 并减去 top-100 这不起作用我也尝试使用切换，但它同时显示了 img 元素

    <header>
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#"><img src="" alt="" width="80"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <form class="ml-auto">
                    <div class="searchbar">
                        <input type="search" placeholder="Search" aria-label="Search">
                        <button type="submit"><img src="images/search.svg" alt="" width="15"></button>
                    </div>
                </form>

                <ul class="navbar-nav ml-auto">
                    <li class="nav-link mr-4">Home</li>
                    <li class="nav-link"><img src="" alt=""> <img style="border-radius: 50%" src="" alt=""> Contact US
                        <img src="images/down.svg" alt=""></li>
                </ul>

            </div>
        </nav>
    </header>

    <div class="sidebar" id="sidebar">
        <ul class="navbar-nav ml-auto ">

            <li class="nav-link">Home<img class="select_line"
                    style="display:none; position: absolute; left: 160px; top: 140px;" src="images/gear.svg"></li>
            <li class="nav-link">Activity<img class="select_line"
                    style="display:none; position: absolute; left: 160px; top: 190px;" src="images/gear.svg"></li>
        </ul>
    </div>

标签： javascripthtmljquerycss

解决方案

您还可以使用 jQuery 中的 .toggleClass。由于您尚未添加整个 HTML，因此我在下面添加了一个示例。希望这是您正在寻找的。

$(document).ready(function () {

            $("#toggle").click(function () {
                    $("#sidebar ul").toggleClass("toggleTop")
                }

            );
        })
.toggleTop{
  margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">
Toggle
</button>

<div class="sidebar" id="sidebar">
        <ul class="navbar-nav ml-auto toggleTop">

            <li class="nav-link">Home<img class="select_line"
                    style="display:none; position: absolute; left: 160px; top: 140px;" src="images/gear.svg"></li>
            <li class="nav-link">Activity<img class="select_line"
                    style="display:none; position: absolute; left: 160px; top: 190px;" src="images/gear.svg"></li>
        </ul>
    </div>

推荐阅读