Question

您好我们正在创建一个网站，提供对特定原因的支持，当我们打开div打开导航时需要一些jQuery帮助，当我打开另一个导航时，前一个导航打开，新的导航打开所以我们最终打开了两个面板，这里的动画再次出现在我们的代码下面，这是他们更好的方法吗...

//File Information - File Name/tser.min.js - File Distributor/Thomas Clark Counselling LTD
$(function() {
    //Notification Animations
    $(".notify-slide").slideDown(1000);

    //Mega Menu
    $(".dropdown-toggle").click(function() {
        $( this ).toggleClass( "toggle-active" );
    });
    $('#dropdown-shop').on('click',function(){
        $('.dropdown-mega-shop').slideToggle();
    });
    $('#dropdown-help').on('click',function(){
        $('.dropdown-mega-help').slideToggle();
    });
});

＆安培;头文件的HTML是

<header>
<?php
    include 'cookie-control.php';
?>
<div class="tc-nav">
    <div class="tc-etn-bar container">
        <div class="tc-bar-row">
            <a href="<?php echo $url; ?>" title="<?php echo 'Return to ', $title, ' Home'; ?>"><div class="tc-logo-main"><?php echo $title; ?></div></a>
            <ul class="tc-main-nav">
                <li><a href="<?php echo $url; ?>">Home</a></li>
                <li><a href="<?php echo $url; ?>" id="dropdown-shop" onClick="return false" class="dropdown-toggle">Schedule an Appointment</a></li>
                <li><a href="<?php echo $url; ?>" id="dropdown-shop" onClick="return false" class="dropdown-toggle">Meet the Team</a></li>
                <li><a href="<?php echo $url; ?>" id="dropdown-help" onClick="return false" class="dropdown-toggle">Help & Support</a></li>
            </ul>
        </div>
    </div>
</div>
<!-- Dropdown Menus -->
<?php include 'mega-navigation.php'; ?>
<!-- Alerts -->
<div class="notify-slide alert warning-alert no-margin">
  <div class="container clearfix">
  <strong>£10 deposits &amp; up to 50% off - </strong>Ends 4th August<a id="close-alert" href="#">&times;</a></div>
</div>
<!-- End Header -->
</header>

＆安培; mega-navigation.php是

<section id="main-dropdown-menus" class="aria-alpha">
    <div class="dropdown-mega dropdown-mega-shop light">
        <div class="container clearfix">
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
        </div>
    </div>
    <div class="dropdown-mega dropdown-mega-help light">
        <div class="container clearfix">
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
        </div>
    </div>
    <div class="dropdown-mega dropdown-mega-products light">
        <div class="container clearfix">
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
            <ul class="dropdown-span">
                <li class="heading">A Heading</li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
                <li><a href="#">A Link</a></li>
            </ul>
        </div>
    </div>
</section>

Answer 1

这个想法：每次click，slideUp()所有其他导航项目，但不是当前。

例如：

$(".nav-item").click(function() {
    $(".nav-item").slideUp(1000); // first slide up All other elements
    $(this).slideToggle(1000); // slide up/down 'this'
});

演示（例如！） http://jsbin.com/vatefeki/1/edit

Answer 2

$(".dropdown-toggle").click(function() {
   $(".toggle-active").removeClass( "toggle-active" );
   $( this ).addClass( "toggle-active" );
});

您无需使用切换功能，您可以轻松使用addClass()和removeClass()

然后切换可见的div

$('#dropdown-shop').on('click',function(){
  $('.dropdown-mega:visible').slideToggle();
  $('.dropdown-mega-shop').slideToggle();
});
$('#dropdown-help').on('click',function(){
  $('.dropdown-mega:visible').slideToggle();
  $('.dropdown-mega-help').slideToggle();
});

jQuery导航切换

2 个答案: