0

我正在尝试使用 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 没有显示或隐藏，谁能告诉我问题是什么，我该如何解决这个问题？

4

1 回答 1

2

试试这个代码。实际上$(this).next()will fetch div，它是.dropdown-container. 这就是为什么.dropdown-container不显示

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

  });

JS 小提琴演示

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

于 2013-08-14T12:03:18.313 回答