JQuery Show 不适用于某些元素

Question

背景：

我正在构建我们的应用程序外观的模型，并添加一些 JQuery 来执行一些普通的 JS 操作，例如隐藏、替换和动画某些元素。该模型正在为我们的用户进行演示，以便我们在编写后端代码之前获得有关功能的反馈。

问题：

我希望能够隐藏我创建的一些面板的主体（注意：在示例中使用 twitter 引导其面板主体）。完成后，会有多个面板包含不同的选项，用户可以单击箭头来显示或隐藏不同的选项。

现在我知道 JQuery 提供了一些我可以使用的插件（选项卡/手风琴），但由于我刚刚离开学校并且仍在学习，我不想使用插件，而是坚持使用 JQuery API 并构建我的自己的效果。

HTML：

<div class="panel panel-info find-replace-form">
<div class="panel-heading">Find and Replace - by Site Location or Number&nbsp;&nbsp;<button class="btn btn-default" id="hider-site"><span class="glyphicon glyphicon-chevron-down" ></span></button></div>
<div class="panel-body" id="hide-sitelocation">
  <h3>Search by Site Location <strong>OR</strong> Site Number:</h3>
  <form>
  <div class="form-group">
    <label for="exampleInputEmail1">Site Location (Address)</label>
    <div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Site Location" style="margin:0 auto;"></div>
  </div>
  <h3><span class="label label-warning">OR</span></h3>
  <div class="form-group">
    <label for="exampleInputEmail1">Site Number</label>
    <div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter Site Number"></div>
  </div>
  <a href="#search" class="btn btn-default" id="search"><span class="glyphicon glyphicon-search"></span>&nbsp;Click to Search</a>
</form>
  <div id="hide-results">
  <h3 class="text-center">Results</h3>
  <h4 class="text-center"><span class="label label-default">Check the assets you would like to change Service Tag names.</span><h4>
<table class="table table-striped table-bordered text-center">
  <tr class="success">
    <td><div class="input-width-75">Asset to<br> rename?</div></td>
    <td>Site Number</td>
    <td>Site Location</td>
    <td>PID</td>
    <td>Service Tag</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-450</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-451</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-452</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-453</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-454</td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>123</td>
    <td>123 Main Street</td>
    <td>H400-0038-1000</td>
    <td>ATL-123-455</td>
  </tr>
</table>
</div>
<br>
<hr>
  <h3>Find and Replace Service Tags:</h3>

    <a href="#show-example" class="btn btn-danger btn-sm" id="show-example">Click for an explination</a>
    <br>
    <p class="alert alert-danger" id="hide-example">For example:<br>If you are moving assets from an Atlanta (ATL-) location to a New York City (NYC-) location and wanted to change the prefix for each service tag.</p>
    <br>
    <div class="form-group">
    <label for="exampleInputEmail1">FIND:</label>
    <div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="FIND: ATL-" style="margin:0 auto;"></div>
    </div>
    <div class="form-group">
    <label for="exampleInputEmail1">REPLACE WITH:</label>
    <div class="input-width-200"><input type="email" class="form-control" id="exampleInputEmail1" placeholder="REPLACE WITH: NYC-" style="margin:0 auto;"></div>
    </div>
    <button class="btn btn-default" data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-retweet"></span>&nbsp;Click to Find &amp; Replace</button>
</div>
</div>

JQuery:

$(document).ready(function(){
   $("#hide-results").hide();

   $("#search").click(function(){
    $("#hide-results").show(500);
   });
   $("#hide-example").hide();

   $("#show-example").click(function(){
    $("#hide-example").show(500);
   });

/* This is causing problems: */

   $("#hide-sitelocation").hide();
   $("#hider-site").click(function() {
      $("hide-sitelocation").show(500);
       $("#hider-site").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
   })


  });

JS 小提琴： http://jsfiddle.net/7L5HC/1/

其他隐藏和显示效果很好，但不适用于面板。

Answer 1

你有一个语法错误：

$("hide-sitelocation").show(500);

它应该以 id“hide-sitelocation”为目标（基于我对您的标记的理解）：

$("#hide-sitelocation").show(500);

Answer 2

你有一个错字。将$("hide-sitelocation").show(500); 更改为$("#hide-sitelocation").show(500);。 （您忽略了选择器中的#。）