切换幻灯片导航不起作用答案

【问题标题】：Toggle Slide Navigation Not Working切换幻灯片导航不起作用
【发布时间】：2015-07-24 01:04:55
【问题描述】：

您好，我的代码有问题...

$(document).ready(function () {
var $active,
    togglerSelector = '.gHdr .gMain .gHolder nav#gNav-primary-nav .nav-primary li a',
    toggledSelector = '.gHdr .gMain .gHolder nav#gNav-primary-nav .nav-primary li ul',
    $items = $(togglerSelector),
    animationDuration = 300,
    activeClassName = 'gActive',
    activeStyle = {height: auto},
    notActiveStyle = {height: 0},
    hideActive = function() {
        $active && $active
            .stop()
            .animate(notActiveStyle, function() {
                $(this).removeClass(activeClassName).hide();
            });    
        $active = void 0;        
    },
    showActive = function($element) {
        $element && ($active = $element)
            .stop()
            .show()
            .animate(activeStyle)
            .addClass(activeClassName)
    };

$items.on('click', function(event) {
    var $this = $(this),
        $overlay = $this.children(toggledSelector),
        theSame = $overlay.is($active);
    hideActive();
    theSame || showActive($overlay);
});
$(this).on('click', function(event) {
    var $target = $(event.target),
        isOutClick = !$target.closest(togglerSelector).length;
    isOutClick && hideActive();
 });
});

我需要导航来自行检测高度，但我无法在网络上提供任何帮助，这似乎很困难。

该代码基本上是我网站的导航，当有人点击下拉链接时，它会向下滑动，如果点击离开导航的页面，它会向上滑动。它还允许他们切换导航。对不起，如果这个答案不是很清楚。我将导航元素设置为display:none;

【问题讨论】：

我正在审核您的帖子，您要跟踪哪个选择器，我的意思是 Html 元素？
我也忘了提到触发器 href 设置为 href="javascript:void(0);"如果那是任何屈膝礼
@Balder 我要跟踪的触发器是锚参考
li里面的每一个锚，对吧？
@Balder 不只是.nav-primary>li>a

标签： javascript jquery html css

【解决方案1】：

我认为这将完成大部分工作：

$(document).ready(function () {    
    $(".toggle").on('click', function(e){
        e.preventDefault();

        //deactivate
        $(".toggle.active").next().toggle();
        $(".toggle.active").toggleClass("active");        

        $(this).toggleClass("active");
        $(this).next().toggle();
    });    

   $(".submenu").on("mouseout", function (e) {
        $(this).toggle();
        $(this).prev().toggleClass("active");
    }); 


});

我刚刚添加了一个名为“toogle”的类到你想要有这种行为的那些锚点，像这样：

<a href="javascript:void(0);" class="toggle">Shop</a>

编辑：我为 <ul> 添加了一个子菜单类，以使其与 mouseout 事件一起使用

<ul class="submenu">

http://jsfiddle.net/a2e7urrg/4/

我没有添加动画，但是很容易做到，您可以将动画添加到css类active。

【讨论】：

如果再次单击或用户根本不单击导航区域，我将如何将其删除？ jsfiddle.net/a2e7urrg/3
有没有可能做到这一点？
也许你可以使用计时器
@我该怎么做？你能给我一个链接吗？？

【解决方案2】：

在对一些新代码进行了一些调整后，我想出了这个解决方案......

$(document).ready(function () {    
    $('.toggle').click(function(e) {
        var child = $(this).index('nav ul li a.toggle');
        if ($(this).siblings('.dropdown').is(":visible")) {
            $('.dropdown').slideUp(200);
            $('.toggle').removeClass('nActive');
        } else {
            $('.dropdown').slideUp(200);
            $('.toggle').removeClass('nActive');
            $('.toggle:eq('+child+')').addClass('nActive');
            $('.dropdown:eq('+child+')').slideDown(350);
        }
    });
});

此解决方案允许我使用 slideDown() 为导航项添加漂亮的优雅效果，并将类切换到正确的相应下拉菜单。

我计划添加一个mouseout 功能来切换课程和slideUp() 下拉菜单 - 但它似乎无法正常工作或效率不高。

你可以在这里找到我的演示：http://jsfiddle.net/a2e7urrg/7/

【讨论】：