Question

我已经做了几天以下的工作了，这让我疯了。根据文档，这应该有效。

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

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

谢谢，〜Donavon

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

Answer 1

我得到了它的工作。非常不优雅，但它有效。

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

从：

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

致：

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

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

jquery在div或container div之后调整大小，并根据click替换span类

1 个答案: