Question

我的工作完全符合我的要求（参见下面的小提琴），除了我发现toggle（）已被弃用。我想知道我是否可以使用toggleClass（）或hide（）和show（）来切换dropdownpanel的可见性。

received: [
  {   Key:"Default Group",
      Value:"1"}
 ]
//
names: 
[  { 
   name: G1
   value: 1
 }  ]

$("#dropdown").click(function() {
  $("#dropdownpanel").toggle();
});

$("#latinlink").click(function() {
    $("#sometext").hide();
    $("#latin").show();
});

$("#back").click(function() {
    $("#latin").hide();
    $("#sometext").show();
});

#dropdownpanel {
  width: 236px;
  height: 100vh;
  background: rgba(00, 00, 00, 0.55);
  color: #ffffff;
  position: fixed;
  top: 38px;
  left: 0px;
  display: none;
  padding: 5px;
}

#latin {
  width: 236px;
  height: 100vh;
  background: rgba(00, 00, 00, 0.55);
  color: #ffffff;
  position: fixed;
  top: 38px;
  left: 0px;
  display: none;
  padding: 5px;
}

JSFiddle

Answer 1

当前行为是因为当您点击#latinlink元素时，它会隐藏#dropdownpanel，因此当您再次点击#dropdown按钮时，它会将#dropdownpanel从隐藏状态切换为再次可见，这与#back按钮的作用相同。

在不更改HTML的情况下解决此问题的最简单方法可能是更新#dropdown点击处理程序以测试#latin当前是否可见：

$("#dropdown").click(function() {
  if ($("#latin").is(":visible"))
    $("#dropdownpanel").hide();
  else
    $("#dropdownpanel").toggle();
  $("#latin").hide();
});
    
$("#latinlink").click(function() {
  $("#dropdownpanel").hide();
  $("#latin").show();
});
    
$("#back").click(function() {
  $("#latin").hide();
  $("#dropdownpanel").show();
});

#dropdownpanel, #latin {
      width: 236px;
      height: 100vh;
      background: rgba(00, 00, 00, 0.55);
      color: #ffffff;
      position: fixed;
      top: 38px;
      left: 0px;
      display: none;
      padding: 5px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <button id="dropdown">
      Dropdown
    </button>
    
    <div id="dropdownpanel">
      <p>Click
        <a href="#" id="latinlink">here</a> to read some latin...
      </p>
    </div>
    
    <div id="latin">
      <button id="back">
        Back
      </button>
      <br /> Lorem ipsum dolor sit amet, epicuri argumentum constituam eum ea. Munere aliquip te nec, at nec dicat fuisset offendit, quo an sonet honestatis. Tempor facete sadipscing te his. Nam vivendo postulant reprehendunt te, offendit principes pri ex, at causae
      oblique torquatos pro.
      <br />
      <br /> Libris philosophia has eu, nam iriure alienum intellegam at. Nec appareat electram ne, amet nonumes per te. Usu eu nisl verterem, labore regione legimus in nam, vel saperet laboramus voluptatibus ut. Ad eam altera nemore. No nobis corpora pro, qui
      ex tale suas dissentias, et iisque omittam inciderint sit. Usu ut case menandri vituperata.
    </div>

或者，您可以更改HTML结构，将#latin div放在#dropdownpanel内。

Answer 2

我为#dropdownpanel和#latin添加了包装器。在此处引用jsfiddle并将样式从#dropdownpanel移至#dropdowncontent

Answer 3

问题是该按钮切换了一个不可见的元素。

＆＃13;

$("#dropdown").click(function() {
	if ($('#dropdownpanel').is(':visible')) {
		$("#dropdownpanel").hide();
	} else if ($('#latin').is(':visible')) {
		$("#latin").hide();
	} else {
		$("#dropdownpanel").show();
	}
});
$("#latinlink").click(function() {
	$("#dropdownpanel").hide();
	$("#latin").show();
});
$("#back").click(function() {
	$("#latin").hide();
	$("#dropdownpanel").show();
});

＆＃13;

#dropdownpanel {
  width: 236px;
  height: 100vh;
  background: rgba(00, 00, 00, 0.55);
  color: #ffffff;
  position: fixed;
  top: 38px;
  left: 0px;
  display: none;
  padding: 5px;
}

#latin {
  width: 236px;
  height: 100vh;
  background: rgba(00, 00, 00, 0.55);
  color: #ffffff;
  position: fixed;
  top: 38px;
  left: 0px;
  display: none;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="dropdown">Dropdown</button>
<div id="dropdownpanel">
  <p>Click <button id="latinlink">here</button> to read some latin...</p>
</div>
<div id="latin">
  <button id="back">Back</button><br> Lorem ipsum dolor sit amet, modo vitae latine id sea, ea illud facilis definitiones cum. Ei mea ignota iuvaret, debet verear adipiscing no mel, mel gubergren torquatos temporibus ex. Mei nemore mandamus et. Omnes
  legimus principes pri et.<br>
  <br> Nam eu odio facer cotidieque, cum in reque elitr fastidii. An duo hinc iisque principes, nostro mollis laoreet cu ius. No mel habeo soluta repudiare, ex qui tritani apeirian delicatissimi. Eos ei dolore option definitiones, ad sit liber scaevola
  dissentiet.
</div>

＆＃13;

jQuery组合toggle（），show（）和hide（）

3 个答案: