0

几天来我一直在研究以下内容，这让我发疯了。根据文档，这应该可以工作。

  • 单击左侧的图像，下一个 div 隐藏高度或扩展高度。
  • 单击右侧的图像，包含的 div 扩展高度和宽度或减小高度和宽度。

有什么建议么？指针？还是jsfiddles？

谢谢，~多纳文

<!DOCTYPE html>
<html lang="en">
<head>
<title>Portlet TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<style type="text/css">
  .portlet {
    vertical-align:     top;
    text-align:         center;
    margin:             0 auto;
    padding:            0;
    width:              50%;
    border:             1px solid;
  }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {

    $('span.expandBody').click(function() {

        $(this).prop('class', ( $(this).next('div.body').is(':visible') ? "ui-icon ui-icon-triangle-1-s" : "ui-icon ui-icon-triangle-1-e" ));
        $(this).next('div.body').slideToggle();

    });


    $('span.expandPortlet').click(function() {

      $(this).prop('class', ( $(this).next('div.body').prop('width') == "50%" ? "ui-icon ui-icon-triangle-1-ne" : "ui-icon ui-icon-triangle-1-sw" ));
      $(this).prop('width', ( $(this).next('div.body').prop('width') == "50%" ? "95%" : "50%" ));

    });

  });
</script>
</head>

<body style="margin: 0" >

    <div  id = "portlet"
          class = "portlet" 
          >
      <div  id = "handle"
            class = "handle"
          >
        <table width="100%">
          <tr >
            <td align="left" width="20%">
              <span id="expandBody" class="ui-icon ui-icon-triangle-1-s"></span>
            </td>
            <td align="center" width="60%">
              HANDLE
            </td>
            <td align="right" width="20%">
              <span id="expandPortlet" class="ui-icon ui-icon-triangle-1-ne"></span>
            </td>
          </tr>
        </table>
      </div>
      <div  id    = "body" 
            class = "body" 
            >
        <iframe name        = "iframeBody" 
                id          = "iframeBody" 
                frameborder = "0"
                width       = "100%"
                height      = "100%" 
                align       = "center" 
                frameborder = "0" 
                src         = "http://www.wikigifs.org"
        >
          iframeBody
        </iframe>
      </div>
    </div>

    <br /><br />

    <div  id = "portlet"
          class = "portlet" 
          >
      <div  id = "handle"
            class = "handle"
          >
        <table width="100%">
          <tr >
            <td align="left" width="20%">
              <span id="expandBody" class="ui-icon ui-icon-triangle-1-s"></span>
            </td>
            <td align="center" width="60%">
              HANDLE
            </td>
            <td align="right" width="20%">
              <span id="expandPortlet" class="ui-icon ui-icon-triangle-1-ne"></span>
            </td>
          </tr>
        </table>
      </div>
      <div  id    = "body" 
            class = "body" 
            >
        <iframe name        = "iframeBody" 
                id          = "iframeBody" 
                frameborder = "0"
                width       = "100%" 
                height      = "100%" 
                align       = "center" 
                frameborder = "0" 
                src         = "http://www.wikigifs.org"
        >
          iframeBody
        </iframe>
      </div>
    </div>

</body>
</html>
4

1 回答 1

0

我让它工作了。非常不雅，但它有效。

我做了一些更新，但这是我需要更改的主要内容。必须是更好的方法，但我无法弄清楚。

从：

$(this).next('div.body').slideToggle();

至：

$(this).parent().parent().parent().parent().parent().parent().find('div.portletBody').slideToggle();

这是更新的 jsfiddle：http: //jsfiddle.net/djlerman/FV79X/3/

于 2013-08-28T22:12:13.537 回答