Question

我有一个包含三个链接的菜单。点击＆＃34; One＆＃34;，第一个链接后，会出现一个下拉菜单。点击＆＃34; Two＆＃34;和＆＃34; Three＆＃34;同样如此。

我怎样才能得到＆＃34; sub-one＆＃34;当＆＃34; sub-two＆＃34;活跃？

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

＆＃13;

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

＆＃13;

#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%;
	}

＆＃13;

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

＆＃13;

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 Toggle下拉菜单点击

2 个答案: