Question

我创建了多个自上而下的菜单项。点击链接后，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>

Answer 1

很难说你的代码到底出了什么问题，但我已经重新编写了它，所以它的工作方式略有不同。您的点击处理程序必须处理两种可能性：要么我们点击隐藏现有部分，要么我们点击切换到新部分。但我们也可以将此视为两个步骤，第二个步骤是可选的：要么隐藏现有部分，要么隐藏现有部分并显示新部分。

我还切换到使用ev.preventDefault()来阻止链接被触发，命名为jQuery变量，因此它们以$开头（这使得它们更容易区分）。你可以try it out on jsfiddle here。

$(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');
        }
    });
});

在div之间切换时删除活动状态

1 个答案: