jQuery導航切換

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