jQuery div의 크기가 조절되지 않습니다.

Question

jQuery div 크기 조정을 구현하려고하는데 클릭 할 때 a.dropdown-link div가 표시되지 않습니다. 오류가 발생하지 않지만 코드가 작동하지 않습니다. 누군가이 문제를 해결하도록 도와 줄 수 있습니까? 또한 여기

<div id="background" class="website-not-active"> 

</div> 

<!-- wrapper--> 
<div id="wrapper"> 

    <!--here is the left menu--> 
    <div id="left-menu" align="center"> 
    <!-- left logo --> 
    <img src="./dashboard/images/logo.png" class="logo"/> 

    <img src="./dashboard/images/user.png"/> 
    <a href="#"><p>ihg <img src="dashboard/images/arr-down.png" style="padding:3px;"/></p></a> 

    <a href="add_hosting.php"><p>add hosting<img src="dashboard/images/arr-down.png" style="padding:3px;"/></p></a> 

    <a href="add_email.php"><p>add email<img src="dashboard/images/arr-down.png" style="padding:3px;"/></p></a> 
    <a href="logout.php"><p>logout<img src="dashboard/images/arr-down.png" style="padding:3px;"/></p></a> 
    <ul id="menu" align="center"> 
       <a href="dashboard-ulrs-management.php"><li class="menu-first"><img src="dashboard/images/menu1.png"/></li></a> 
     <li class="website-not-active"><img src="dashboard/images/menu2.png"/></li> 
     <a href="dashboard-facebook-management.php"><li class="menu-third"><img src="dashboard/images/menu3.png"/></li></a> 
     <a href="dashboard-email-management.php"><li class="menu-forth"><img src="dashboard/images/menu4.png"/></li></a> 
     <a href="dashboard-settings-management.php"><li class="menu-fifth"><img src="dashboard/images/menu5.png"/></li></a> 
    </ul> 
    <p class="copyright">copyright &copy; 2013</p> 
    </div> 
    <!-- end left-menu--> 

<!-- content 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;"> 
<!-- tabela--> 

<table width="50%" border="0"> 
    <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> 

</table> 

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


<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;"> 
<!-- tabela--> 

<table width="50%" border="0"> 
    <tr> 
    <td>Website URL:</td> 
     <td>http://mysite.com/comp_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> 

</table> 

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


<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;"> 
<!-- tabela--> 

<table width="50%" border="0"> 
    <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> 

</table> 

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


<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;"> 
<!-- tabela--> 

<table width="50%" border="0"> 
    <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> 

</table> 

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

</div> 
    <!-- end content--> 

</div> 
<!--end wrapper--> 

내 jsfiddle

Answer 1

당신이 jQuery를 포함하는 것을 잊지 않았다 :

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

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

    }); 

    $("body").click(function() { 
    dd.hide(); 
    }); 

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

그리고 내 HTML : 여기 내 jQuery 코드인가? 코드는 jQuery를 추가 한 후 피들에서 작동합니다.

Answer 2

다음 jQuery를 사용해보세요. 나를 위해 노력하고 있습니다 :

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

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

    }); 

    $("body").click(function() { 
    dd.hide(); 
    }); 

체크 아웃이 jfiddle

Answer 3

이 스크립트 전에 머리 후이

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

를 추가하려고합니다.