單擊“ jQuery Toggle”下拉菜單

Question

我有一個帶有三個鏈接的菜單。 單擊第一個鏈接“一個”后，將顯示一個下拉菜單。 單擊“兩個”和“三個”也是如此。

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

看看這個更新的小提琴

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