单击“ jQuery Toggle”下拉菜单

Question

I have a menu with three links. Upon clicking "One", the first link, a dropdown menu appears. Same goes for clicking "Two", and "Three".

How can I get "sub-one" to fade out when "sub-two" is active?

<div id="navi">

<div id="one"> 
    <a href="#">one</a> 
</div>    

 <div id="two"> 
    <a href="#">two</a> 
</div>    

 <div id="three"> 
    <a href="#">three</a> 
  </div>    
 </div>

  <div id="sub-one">
      <a href="#"> <p> one </p> </a>
      <a href="#"> <p> two </p> </a>
  </div>

  <div id="sub-two">
      <a href="#"> <p> thre </p> </a>
      <a href="#"> <p> four </p> </a>
  </div>

  <div id="sub-three">
      <a href="#"> <p> five </p> </a>
      <a href="#"> <p> six </p> </a>
  </div>

Complete code - jsfiddle.net

Answer 1

Change your approach to fade all them out by default. Then fade in your target

$(document).ready(
      function() {
        $("#one, #two, #three").click(function() {
          var id = $(this).attr('id');
          $('[id^="sub"]').fadeOut();
          $("#sub-" + id).fadeIn();
        });
      });

 $(document).ready( function() { $("#one, #two, #three").click(function() { var id = $(this).attr('id'); $('[id^="sub"]').fadeOut(); if($("#sub-" + id).is(':visible')){ $("#sub-" + id).fadeOut(); } else{ $("#sub-" + id).fadeIn(); } }); }); 

 #navi { font-family: 'Roboto', Helvetica, Sans-serif; font-size: 12px; letter-spacing: 4px; color: black; font-weight: 600; position: fixed; height: 100px; float: right; text-align: right; right: 10%; top: 11%; min-width: 10%; } #navi a { color: black; padding: 0 0 0 5px; } #one, #two, #three { float: left; padding-left: 5px; } #sub-one, #sub-two, #sub-three { display: none; font-family: 'Roboto', Helvetica, Sans-serif; font-size: 12px; letter-spacing: 2px; color: black; font-weight: 400; position: absolute; float: right; text-align: right; right: 10%; top: 15%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="navi"> <div id="one"> <a href="#">one</a> </div> <div id="two"> <a href="#">two</a> </div> <div id="three"> <a href="#">three</a> </div> </div> <div id="sub-one"> <a href="#"> <p>one</p> </a> <a href="#"> <p>two</p> </a> </div> <div id="sub-two"> <a href="#"> <p>thre</p> </a> <a href="#"> <p>four</p> </a> </div> <div id="sub-three"> <a href="#"> <p>five</p> </a> <a href="#"> <p>six</p> </a> </div> 

Answer 2

Check out this updated fiddle

HTML

<div class="sub" id="sub-one">
    <a href="#"> <p> one </p> </a>
    <a href="#"> <p> two </p> </a>
</div>

<div class="sub" id="sub-two">
    <a href="#"> <p> thre </p> </a>
    <a href="#"> <p> four </p> </a>
</div>

<div class="sub" id="sub-three">
    <a href="#"> <p> five </p> </a>
    <a href="#"> <p> six </p> </a>
</div>

JS

function fadeOutAll(){
    $(".sub").fadeOut();    
}


$(document).ready(
    function() {
        $("#one").click(function() {
            fadeOutAll()
            $("#sub-one").fadeToggle();
        });
    });