在潜水之间切换时移除活动状态

Removing active state when toggling between divs

本文关键字：活动状态 潜水 之间      更新时间：2023-09-26

我创建了多个自顶向下的菜单项。当点击链接时，div会向下滑动显示一些内容。

我想用这些链接做的是它们之间的切换。当一个div被打开时，一个活动状态被添加到链接中，当它被关闭时，活动状态被删除，div被隐藏。当您在链接之间单击时，我已经设法使它们在彼此之间切换，并且活动状态被添加到打开的div中。

我不能实现的是删除活动状态和重置一些css。

这是我的Javascript:

//menu toggle
$(".trigger").click(function() {
   var divToToggle = $( $(this).data('target') );
   $(".toggle:visible").not(divToToggle).hide();
   $(".trigger").not(divToToggle).removeClass('active');
   $('.top-nav').css('margin-top', '20px');
   divToToggle.slideToggle("fast", "linear");
   $(this).toggleClass('active');
   $('.top-nav').css('margin-top', '0px');
   return false;
});

.toggle类在所有被切换的div上:

    <div class="account-container toggle hide"></div>
    <div class="collections-container toggle hide"></div>
    <div class="search-container toggle hide"></div>

.trigger类在我所有的链接:

    <ul class="top-nav">
        <li><a class="hidden-tablet" href="">home </a></li>
        <li><a class="hidden-tablet" href="">about us </a></li>
        <li><a class="hidden-tablet" href="">where to buy </a></li>
        <li><a class="hidden-tablet" href="">contact us </a></li>
        <li class="tablet-menu visible-tablet"><a class="tablet-menu trigger" href="" data-target=".tablet-menu-container">tablet menu</a></li>
        <li class="account"><a class="account trigger" href="" data-target=".account-container">account</a></li>
        <li class="collection"><a class="collection trigger" href="" data-target=".collections-container">collections</a></li>
        <li class="search"><a class="search trigger" href="" data-target=".search-container">search</a></li>
        <li class="basket"><a class="basket trigger" href="" data-target=".home-basket-container">basket</a></li>
            </ul>

很难说你的代码到底在哪里出错了，但我已经重写了它，所以它的工作方式略有不同。你的点击处理程序必须处理两种可能性:要么我们点击隐藏一个现有的部分，要么我们点击切换到一个新的部分。但我们也可以把它看作是两个步骤，第二个步骤是可选的:要么隐藏现有的部分，要么隐藏现有的部分并显示新的部分。

我也切换到使用ev.preventDefault()来阻止链接的触发，命名jQuery变量，所以他们开始与$(这使他们更容易区分)。你可以在jsfiddle上试试。

$(document).ready(function () {
    $(".trigger").click(function (ev) {
        ev.preventDefault();
        var $clickedLink = $(this);
        var $divToToggle = $($(this).data('target'));
        var isHideOnly = $clickedLink.hasClass('active');
        // Hide the existing div and remove 'active' class.
        $(".toggle:visible").hide();
        $(".trigger").removeClass('active');
        $('.top-nav').css('margin-top', '20px');
        // If we're showing a new one, reveal it and set the active class on the link.
        if (!isHideOnly) { 
            $divToToggle.slideToggle("fast", "linear");
            $('.top-nav').css('margin-top', '0');
            $clickedLink.addClass('active');
        }
    });
});
相关文章：