Question

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

$(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;

Answer 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");
    }); 


});

我刚刚添加了一个名为＆＃34; toogle＆＃34;对于那些你想要有这种行为的锚点，如下所示：

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

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

<ul class="submenu">

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

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

Answer 2

经过一些新代码的调整后，我想出了这个解决方案......

 x = JSON.parse(yourArray)
 JSON.parse(x["message"])

此解决方案允许我使用$(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下拉菜单 - 但它似乎无法正常工作或效率高。

您可以在此处找到我的演示：http://jsfiddle.net/a2e7urrg/7/

切换幻灯片导航不起作用

2 个答案: