Question

我有五个侧面按钮，可以分为五个特定的“子菜单”。他们实际上只是div。我目前正在使用非常基本的jquery隐藏/显示它们，我想知道是否有更简洁的方法来处理所有隐藏/显示调用？感谢。

以下是我的意思：https://jsfiddle.net/SteveSerrano/b562v654/

HTML：

<!-- TOP MENU IS NOT HIDDEN UNTIL ANOTHER IS CLICKED -->
<button id="nyNavButton">NEW YORK</button>
<div id="nyContainer">
  <div class="nav">
    <ul>
      <li>PHP generated links...</li>
      <li>PHP generated links...</li>
      <li>PHP generated links...</li>
    </ul>
  </div>
</div>
<button id="njNavButton">NEW JERSEY</button>
<div id="njContainer">
  <div class="nav">
    <ul>
      <li>PHP generated links...</li>
      <li>PHP generated links...</li>
      <li>PHP generated links...</li>
    </ul>
  </div>
</div>
<button id="nhNavButton">NEW HAMPSHIRE</button>
<div id="nhContainer">
  <div class="nav">
    <ul>
      <li>PHP generated links...</li>
      <li>PHP generated links...</li>
      <li>PHP generated links...</li>
    </ul>
  </div>
</div>

JQUERY：

$("#njContainer").hide();
$("#nhContainer").hide();

$("#njNavButton").click(function(){
    $("#njContainer").show();
    $("#nyContainer").hide();
    $("#nhContainer").hide();
    });

$("#nhNavButton").click(function(){
    $("#nhContainer").show();
    $("#nyContainer").hide();
    $("#njContainer").hide();
    });

$("#nyNavButton").click(function(){
    $("#nyContainer").show();
    $("#njContainer").hide();
    $("#nhContainer").hide();
    });

Answer 1

使用RewriteCond %{HTTP_X_FORWARDED_PROTO} ^https$ [or] RewriteCond %{HTTPS} on选择除所需元素之外的所有元素。您可以将它们组合成一个处理程序。

e.g。

not()

JSFiddle： https://jsfiddle.net/TrueBlueAussie/b562v654/3/

说明：

我在按钮和容器元素中添加了类（而不是管理所有唯一ID）。
此代码假设您的容器遵循DOM中的按钮。如果更改，则需要更改$("#njContainer").hide(); $("#nhContainer").hide(); $(".button").click(function() { $('.container').not($(this).next('.container').show()).hide(); });

Answer 2

您可以使用：

$("#njContainer").hide();
$("#nhContainer").hide();

$("button").click(function(){
    $("div[id*=Container]").each(function(){
    $(this).hide();
    })
    $(this).next().show()
    })

希望我能帮到你。

Answer 3

添加课程＆＃39; linkButton＆＃39;到您的按钮和＆＃39; linkContainer＆＃39;你所包含的div：

  $("#njContainer").hide();
   $("#nhContainer").hide();

  $(".linkButton").click(function(){
    $(".linkContainer").hide();
    $(this).next(".linkContainer").show();

})

JSFiddle：https://jsfiddle.net/ardieziff/b562v654/4/

使用JQuery隐藏/显示div的更简单方法

3 个答案:

说明：