두 번째 div가 jQuery에 의해 숨길 때 div의 너비를 100 %로 설정하는 방법

Atif Azad |

아래 코드가 있습니다. 빨간색 div를 숨길 때 파란색 div의 너비를 100 %로 설정하고 싶습니다. 어떤 생각? 내 자바 스크립트 코드

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#button").toggle(function() {
                $(this).text('Show Content');
            }, function() {
                $(this).text('Hide Content');
            }).click(function(){
                $("#red").slideToggle("slow");
            });
        });
        </script>

내 스타일

<style>
        #red {

            width: 50%;
            border: 5px solid red;
            float: left
        }
        .blue {
            float: left;
            border: 5px solid #00F;
        }
        </style>

및 내 HTML 코드

<a href="#" id="button" class="button_style">Hide content</a> <br/>
<div id="red">Content</div>
<div class="blue">&nbsp;</div>
Shaunak D

100 % 너비를 할당하는 클래스를 추가해보십시오.

JS :

$("#red").slideToggle("slow",function(){
    $('.blue').toggleClass('fullWidth')
});

CSS :

.fullWidth{
    width:100%;
}

바이올린 데모

참조 : toggleClass ()

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

두 번째 div의 높이를 설정하는 방법

분류에서Dev

두 div가 플로팅 될 때 div의 너비 설정 (자동)

분류에서Dev

두 번째 div가없는 경우 첫 번째 div에 CSS를 설정하는 방법

분류에서Dev

JQuery에서 동일한 높이로 두 개의 div를 설정하는 방법

분류에서Dev

첫 번째`<td>`의 높이가 두 번째`<td>`보다 클 때 두 번째`<td>`의 요소를 왼쪽 상단에 정렬하는 방법

분류에서Dev

한 div의 텍스트가 두 번째 div의 너비를 기준으로 잘리는 동일한 행의 두 div (화살표 모양의 부모 div)

분류에서Dev

두 개의 동일한 값의 스피너가 서로 의존하는 방식 한 스피너 선택 두 번째 스피너에서 해당 값 숨기기

분류에서Dev

첫 번째 div의 높이에 따라 두 번째 div의 오버플로를 숨겼습니다 (반응 형).

분류에서Dev

배열의 첫 번째 값이 두 번째 배열의 첫 번째 값에 100 번 더해지는 두 배열을 서로 추가 하시겠습니까?

분류에서Dev

크롬에서, div 내부 요소의 너비가 위의 두 번째 원 푸시보다 100 %이면

분류에서Dev

인접한 div의 크기가 화면 너비를 초과 할 때 div를 중앙에 정렬하는 방법

분류에서Dev

두 번째 TextBox의 날짜를 첫 번째 TextBox의 날짜 + 1로 설정하는 방법

분류에서Dev

두 번째 div의 높이를 페이지의 100 %로 채우기 (순수 CSS)

분류에서Dev

높이와 너비가 100 % 인 div 내부의 div 높이를 %로 설정

분류에서Dev

동적 너비 (첫 번째 왼쪽, 두 번째 가운데, 세 번째 오른쪽)를 사용하여 3 개 div 요소를 수평으로 중앙에 배치하는 방법은 무엇입니까?

분류에서Dev

CSS : 최소 너비의 float div 2 개가 너비에 맞을 때까지 float div 너비를 100 % 확장

분류에서Dev

나머지 모든 너비를 차지하기 위해 두 번째 부동 div를 얻는 방법

분류에서Dev

세 개의 div가 있는데 전체 페이지를 다시로드하지 않고 두 번째 div를 새로 고치는 방법은 무엇입니까?

분류에서Dev

Div를 숨길 때 YouTube 비디오를 중지하는 방법

분류에서Dev

첫 번째 선택이 변경 될 때 두 번째 스피너의 위치가 기본값으로 설정 됨

분류에서Dev

Laravel의 경로에서 두 번째 인수를 얻는 방법

분류에서Dev

스크롤 할 때 먼저 숨겨지는 두 div가 두 번째 위에 고정 된 열을 만드는 방법은 무엇입니까?

분류에서Dev

스크롤 할 때 먼저 숨겨지는 두 div가 두 번째 위에 고정 된 열을 만드는 방법은 무엇입니까?

분류에서Dev

두 번째 생성이 첫 번째에 의존 할 때 2 개의 매개 변수로 테스트를 작성하는 방법은 무엇입니까?

분류에서Dev

<body>와 <div>에 테두리를 추가하면 사라지는 첫 번째 <div> 사이의 신비한 패딩

분류에서Dev

부모 div가 너비를 변경할 때 고정 자식 div의 자동 너비를 설정하는 방법은 무엇입니까?

분류에서Dev

UIPickerview에서 첫 번째 구성 요소 선택을 기반으로 두 번째 구성 요소의 데이터를 설정하는 방법

분류에서Dev

CSS에서 div의 너비를 높이로 설정하는 방법이 있습니까?

분류에서Dev

'clear : both'및 'float : left'가 기대치를 충족하지 못할 때 div의 너비를 해당 콘텐츠로 조정하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    두 번째 div의 높이를 설정하는 방법

  2. 2

    두 div가 플로팅 될 때 div의 너비 설정 (자동)

  3. 3

    두 번째 div가없는 경우 첫 번째 div에 CSS를 설정하는 방법

  4. 4

    JQuery에서 동일한 높이로 두 개의 div를 설정하는 방법

  5. 5

    첫 번째`<td>`의 높이가 두 번째`<td>`보다 클 때 두 번째`<td>`의 요소를 왼쪽 상단에 정렬하는 방법

  6. 6

    한 div의 텍스트가 두 번째 div의 너비를 기준으로 잘리는 동일한 행의 두 div (화살표 모양의 부모 div)

  7. 7

    두 개의 동일한 값의 스피너가 서로 의존하는 방식 한 스피너 선택 두 번째 스피너에서 해당 값 숨기기

  8. 8

    첫 번째 div의 높이에 따라 두 번째 div의 오버플로를 숨겼습니다 (반응 형).

  9. 9

    배열의 첫 번째 값이 두 번째 배열의 첫 번째 값에 100 번 더해지는 두 배열을 서로 추가 하시겠습니까?

  10. 10

    크롬에서, div 내부 요소의 너비가 위의 두 번째 원 푸시보다 100 %이면

  11. 11

    인접한 div의 크기가 화면 너비를 초과 할 때 div를 중앙에 정렬하는 방법

  12. 12

    두 번째 TextBox의 날짜를 첫 번째 TextBox의 날짜 + 1로 설정하는 방법

  13. 13

    두 번째 div의 높이를 페이지의 100 %로 채우기 (순수 CSS)

  14. 14

    높이와 너비가 100 % 인 div 내부의 div 높이를 %로 설정

  15. 15

    동적 너비 (첫 번째 왼쪽, 두 번째 가운데, 세 번째 오른쪽)를 사용하여 3 개 div 요소를 수평으로 중앙에 배치하는 방법은 무엇입니까?

  16. 16

    CSS : 최소 너비의 float div 2 개가 너비에 맞을 때까지 float div 너비를 100 % 확장

  17. 17

    나머지 모든 너비를 차지하기 위해 두 번째 부동 div를 얻는 방법

  18. 18

    세 개의 div가 있는데 전체 페이지를 다시로드하지 않고 두 번째 div를 새로 고치는 방법은 무엇입니까?

  19. 19

    Div를 숨길 때 YouTube 비디오를 중지하는 방법

  20. 20

    첫 번째 선택이 변경 될 때 두 번째 스피너의 위치가 기본값으로 설정 됨

  21. 21

    Laravel의 경로에서 두 번째 인수를 얻는 방법

  22. 22

    스크롤 할 때 먼저 숨겨지는 두 div가 두 번째 위에 고정 된 열을 만드는 방법은 무엇입니까?

  23. 23

    스크롤 할 때 먼저 숨겨지는 두 div가 두 번째 위에 고정 된 열을 만드는 방법은 무엇입니까?

  24. 24

    두 번째 생성이 첫 번째에 의존 할 때 2 개의 매개 변수로 테스트를 작성하는 방법은 무엇입니까?

  25. 25

    <body>와 <div>에 테두리를 추가하면 사라지는 첫 번째 <div> 사이의 신비한 패딩

  26. 26

    부모 div가 너비를 변경할 때 고정 자식 div의 자동 너비를 설정하는 방법은 무엇입니까?

  27. 27

    UIPickerview에서 첫 번째 구성 요소 선택을 기반으로 두 번째 구성 요소의 데이터를 설정하는 방법

  28. 28

    CSS에서 div의 너비를 높이로 설정하는 방법이 있습니까?

  29. 29

    'clear : both'및 'float : left'가 기대치를 충족하지 못할 때 div의 너비를 해당 콘텐츠로 조정하는 방법은 무엇입니까?

뜨겁다태그

보관