-1

クリック時に jQuery div のサイズ変更を実装しようとしていますが、a.dropdown-link をクリックすると div が表示されません。エラーは発生していませんが、コードが機能していません。誰かがこの問題を解決するのを手伝ってくれますか? ここに私の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：

<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があります

4

3 に答える 3

1

次の 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をチェックしてください

于 2013-08-14T19:05:11.340 に答える
1

jQuery を含めるのを忘れていませんか? jQueryを追加した後、コードはフィドルで動作します。

于 2013-08-14T19:02:35.057 に答える
1

これを追加

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

頭の後、スクリプトの前に試してみてください。

于 2013-08-14T19:16:40.093 に答える