javascript - JQuery Show 不适用于某些元素

Question

背景:

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

问题:

我希望能够隐藏我创建的一些面板的主体(注意:在示例中使用 twitter bootstrap 其面板主体)。一旦我完成，将会有多个带有不同选项的面板，用户可以单击箭头来显示或隐藏不同的选项。

现在我知道 JQuery 提供了一些我可以使用的插件(tabs/accordions)，但是因为我刚从学校毕业并且还在学习我不想使用插件而只是坚持使用 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 fiddle : http://jsfiddle.net/7L5HC/1/

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

Answer 1

语法错误:

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

它应该以 id“hide-sitelocation”为目标(根据我对您的标记的理解):

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