jquery измените размер после div или контейнера div и замените класс span на основе щелчка

Я работаю над следующим в течение нескольких дней, и это сводит меня с ума. Согласно документации, это должно сработать.jquery измените размер после div или контейнера div и замените класс span на основе щелчка

Кликните по изображению слева, а следующий div скрывает высоту или увеличивает высоту.
Кликните по изображению справа, а содержащая div расширяет высоту & ширина или уменьшение высоты & ширина.

Любые предложения? указатели? или 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>

источник

2013-08-28 Donavon Lerman

Там нет смысла в размещении весь ваш код просто опубликовать ту часть, которая является не работает, создание скрипки будет лучше – SarathSprakash

Я создал скрипку: http: // jsfid dle.net/djlerman/FV79X/ –

Я получил это работает. Очень неэлегантно, но он работает.

Я сделал несколько обновлений, но вот главное, что мне нужно было изменить. Должен быть лучший способ сделать это, но я не мог понять это.

от:

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

To:

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

Вот обновленный jsfiddle: http://jsfiddle.net/djlerman/FV79X/3/

источник

2013-08-28 22:12:13

jquery измените размер после div или контейнера div и замените класс span на основе щелчка

ответ

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