Высота div не переключается

Я пытаюсь переключить высоту div с помощью jquery. У меня есть этот HTML кодВысота div не переключается

<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>

, и я использую этот яваскрипта код в голове:

<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 является не показывать или скрывать, может кто-нибудь скажет мне, в чем проблема, и как я могу это решить?

источник

2013-08-14 Darko Petkovski

Похоже, он должен работать. Невозможно воспроизвести. Можете ли вы создать скрипку? – putvande

@putvande вопрос обновлен - http://jsfiddle.net/Ybup4/ –

Это пустая скрипка? – putvande

Попробуйте этот код. На самом деле $(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(); 

    });

JS скрипку Demo

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

источник

2013-08-14 12:03:18 Dinesh

, это дает мне Uncaught ReferenceError: тело не определено. должен ли я поместить что-то в тег , использовать onload или что-то в этом роде? –

Я обновил URL скрипта. Извините, забыли добавить одинарные кавычки для '$ ('body')' – Dinesh

ошибка исчезла, но div не исчезли –

Высота div не переключается

ответ

Смежные вопросы