Jquery 点击时切换下拉菜单

Question

我有一个包含三个 link 的菜单。单击 "One" 后，会出现第一个 link 下拉菜单。单击 "Two" 和 "Three" 也是如此。

如何在 "sub-two" 激活时让 "sub-one" 淡出？

<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>

完整代码 - jsfiddle.net

Answer 1

更改您的方法以默认将它们全部淡出。然后淡入你的目标

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

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

Jquery 点击时切换下拉菜单

Jquery Toggle Dropdown Menu On Click

jquery

html

css

drop-down-menu

fade