Question

我正在尝试使用jquery切换div的高度。我有这个HTML代码

  <div id="content" align="center">
<p class="welcome-message"><b><img src="./dashboard/images/website-management.png">
WEBSITEs UNDER MANAGEMENT</b></p>

<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
    <div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
  <tbody><tr>
    <td>Website URL:</td>
       <td>http://ihgcareersblog.com/</td>
  </tr>

  <tr>
    <td>Date of creation:</td>
       <td>8/7/2012</td>
  </tr>
  <tr>
    <td>Expiration date:</td>
    <td>8/6/2013</td>
  </tr>
  <tr>
    <td>Hosting Package:</td>
    <td></td>
  </tr>

</tbody></table>

</div>





    </div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
    <div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
  <tbody><tr>
    <td>Website URL:</td>
       <td>http://mysite.com/my_hotjobsubmission</td>
  </tr>

  <tr>
    <td>Date of creation:</td>
       <td>5/31/2013</td>
  </tr>
  <tr>
    <td>Expiration date:</td>
    <td>5/31/2014</td>
  </tr>
  <tr>
    <td>Hosting Package:</td>
    <td></td>
  </tr>

</tbody></table>

</div>





    </div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
    <div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
  <tbody><tr>
    <td>Website URL:</td>
       <td></td>
  </tr>

  <tr>
    <td>Date of creation:</td>
       <td></td>
  </tr>
  <tr>
    <td>Expiration date:</td>
    <td></td>
  </tr>
  <tr>
    <td>Hosting Package:</td>
    <td>Awesome hosting</td>
  </tr>

</tbody></table>

</div>





    </div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
    <div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
  <tbody><tr>
    <td>Website URL:</td>
       <td></td>
  </tr>

  <tr>
    <td>Date of creation:</td>
       <td>08/05/2013</td>
  </tr>
  <tr>
    <td>Expiration date:</td>
    <td></td>
  </tr>
  <tr>
    <td>Hosting Package:</td>
    <td>Awesome hosting</td>
  </tr>

</tbody></table>

</div>





    </div>
</div>
<!-- end email acc-->
<p></p></div>





    </div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
    <div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
  <tbody><tr>
    <td>Website URL:</td>
       <td>http://mysite.com/my_hotjobsubmission</td>
  </tr>

  <tr>
    <td>Date of creation:</td>
       <td>5/31/2013</td>
  </tr>
  <tr>
    <td>Expiration date:</td>
    <td>5/31/2014</td>
  </tr>
  <tr>
    <td>Hosting Package:</td>
    <td></td>
  </tr>

</tbody></table>

</div>





    </div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
    <div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
  <tbody><tr>
    <td>Website URL:</td>
       <td></td>
  </tr>

  <tr>
    <td>Date of creation:</td>
       <td></td>
  </tr>
  <tr>
    <td>Expiration date:</td>
    <td></td>
  </tr>
  <tr>
    <td>Hosting Package:</td>
    <td>Awesome hosting</td>
  </tr>

</tbody></table>

</div>





    </div>
</div>
<!-- end email acc-->
<p></p>
<p class="welcome-message">
<!-- email account -->
</p><div id="website-acc">
<a class="dropdown-link" href="#"><p class="fb-head"><img src="./dashboard/images/acc_arr.png" style="margin-right:5px;"><b>WEBSITE </b></p></a>
    <div>
<div class="dropdown-container" style="display: none;">
<table width="50%" border="0">
  <tbody><tr>
    <td>Website URL:</td>
       <td></td>
  </tr>

  <tr>
    <td>Date of creation:</td>
       <td>08/05/2013</td>
  </tr>
  <tr>
    <td>Expiration date:</td>
    <td></td>
  </tr>
  <tr>
    <td>Hosting Package:</td>
    <td>Awesome hosting</td>
  </tr>

</tbody></table>

</div>





    </div>
</div>
<!-- end email acc-->
<p></p></div>

我正在使用这个javascript代码：

<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script>
$(document).ready(function(){

  var dd = $(".dropdown-container");

  $("a.dropdown-link").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    dd.hide("fast");
    $(this).next().show("fast");
  });

  $(document).click(function() {
    dd.hide();
  });

  dd.click(function(e) {
    e.stopPropagation();
  });
});
</script>

这是jsfiddle 现在问题是div没有显示或隐藏，任何人都可以告诉我问题是什么以及如何解决这个问题？

Answer 1

试试这段代码。实际上$(this).next()会抓取div，.dropdown-container的父亲。.dropdown-container。这就是为什么$("a.dropdown-link").click(function(e) { e.preventDefault(); e.stopPropagation(); dd.hide("fast"); $(this).next().find('.dropdown-container').show(); });没有显示

的原因

{{1}}

JS小提琴演示

http://jsfiddle.net/t7FL9/1/

Div高度不切换

1 个答案: